css - How to create a specific layout in html? -

css - How to create a specific layout in html? -

i create specific layout in html have dificulties.

images easier understand words, here have:

this fine, div1 gets heigher, have this:

and goal have that:

for moment, using divs, not idea. help welcome. give thanks much in advance.

divs great way it. can utilize floated layout containing div around 2 right divs. here code show mean:

html

<div id="wrapper" class="clearfix"> <div id="sidebar"></div> <div id="main_content"> <div id="top_right"></div> <div id="bottom_right"></div> </div> </div>

css

#wrapper { background: #44bbf0; } #sidebar { float: left; width: 100px; height: 500px; background: #485f40; } #main_content { float: right; } #top_right { width: 200px; height: 200px; background: #ff553f; } #botom_right { width: 200px; height: 300px; background: #b0de91; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie < 8 */ }

here js fiddle link show how looks: http://jsfiddle.net/ddxyb/

make sure clear wrapper div. because contains floated elements, have no height if don't. in illustration used, set heights save time, if used automatic heights , allow divs take on height of content.

this screenshot jsfiddle code:

css layout html