html - messed up html layout

Question

I want a HTML page with following layout. Have done the coding but the output seems all cluttered up.Can someone please point out the mistake.

Summary of my wanted design

• a main div element (container).
• a header div with margin auto and width 960px(header).
• a display_wrapper div .width-960px & auto margin.
• a div element for left navbar.(inside display_wrapper)
• a div element for main content display.(inside display_wrapper & besides _left_navbar)

HTML part

 <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 PART

#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/

Why is it that _left_navbar and dynamic display div appear outside display_wrapper.Has it got something to do with not using clear.(check jsfiddle link)

Kindly tell me my mistake and how to rectify it.

Answer 1

刚从width:100%_ float:right_#dynamic_content

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

更新

试试这个：

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