乱七八糟的html布局

Question

我想要一个具有以下布局的 HTML 页面。已经完成编码，但输出似乎很混乱。有人可以指出错误。

我想要的设计总结

• 一个主 div 元素（容器）。
• 具有自动边距和宽度 960 像素（标题）的标题 div。
• 一个 display_wrapper div .width-960px 和自动边距。
• 左侧导航栏的 div 元素。（在 display_wrapper 内）
• 用于主要内容显示的 div 元素。（在 display_wrapper 和 _left_navbar 之外）

HTML 部分

 <div id="container">
        <div id="header">
            header 
        </div>
        <div id="display_wrapper">
            <div id="_left_navbar">
                _left_navbar div
            </div>
            <div id="dynamic_content">
                dynamic content div
            </div>
        </div>
    </div>

CSS 部分

#container{border:1px solid black;width:100%}
#header{width:500px;margin:0 auto;border:1px solid black;height:60px;}
#display_wrapper{width:500px;margin:0 auto;border:1px solid red;}
#_left_navbar{width:100px;height:200px;float:left;border:1px solid black;}
#dynamic_content{width:100%;height:200px;float:right;border:1px solid green;}

http://jsfiddle.net/jLNLq/

为什么_left_navbar和动态显示div出现在display_wrapper外面。是不是和不使用clear有关。（查看jsfiddle链接）

请告诉我我的错误以及如何改正它。

Answer 1

刚刚从#dynamic_content 中删除了width:100% 和float:right

http://jsfiddle.net/jLNLq/6/

更新

试试这个：

http://jsfiddle.net/jLNLq/7/