I have created an HTML page with a specific layout in mind, but the output appears cluttered. I'm seeking help to identify the mistake.
Here's a summary of the design I want:
- A main div element (container).
- A header div with a margin auto and width of 960px (header).
- A display_wrapper div with a width of 960px and margin set to auto.
- A div element for the left navbar (inside display_wrapper).
- A div element for the main content display (inside display_wrapper and next to the 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;}
Why do the _left_navbar and dynamic display div appear outside the display_wrapper? Could it be related to not using clear? (Check the jsfiddle link)
Please let me know my mistake and how to correct it.