html - 搞砸了html布局

Question

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

我想要的设计总结

• 一个主要的 div 元素(容器)。
• 页眉 div，边距自动，宽度为 960px(页眉)。
• 一个 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/