搞砸了HTML布局

Question

我想要一個具有以下布局的HTML頁面。 完成編碼后輸出似乎雜亂無章，請指出錯誤。

我想要的設計摘要

• 一個主要的div元素（容器）。
• 標頭div，邊距自動設置，寬度為960px（header）。
• 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/