关于css布局的一个小问题

页面文件是这样的

    <div id="area" style="border: 1px solid #ccc; background: #eee;">
        <div id="nav">
            <a style="padding-left: 20px" href="#" onclick="loadWorkArea('pages/welcome.js','noTree');$jq('#navTitle').html('');">首页</a>
            <span style="padding-left: 10px">当前位置：</span>
            <span id="navTitle"></span>
            <span style="margin-right: 20px; float: right">
                <a href="<%=projectRootPath%>logout" class="line">退出</a>
            </span>
            <span style="padding-right: 20px; float: right">
                当前用户：${LoginPerson.name != null ? LoginPerson.name : LoginUser.ygxm}
            </span>
        </div>
        <!-- 工作区内容  -->
        <div id="container" style="width: 100%; margin: auto;"></div>
    </div>