layout - Multiple rows with CSS floating divs -


i implement such design using floating css divs:

 --------------- |header       | --------------- |col1| row1   | |    |--------| |    | row2   | --------------- | footer      | --------------- 

i searched around found no easy way it.

how achieve this?

thanks.

edit: want clarify problem. want have 2 rows of images next menu bar on left. trying use float:left image layout.

edit2: solved problem myslef using display:inline-block image elements instead of float:left.

i start container has width of page. example, we'll width:950px. of weird widths caused because of borders, if removed them, the widths more regular numbers 400, 950, 350 etc. here live example: http://jsfiddle.net/edgbp/embedded/result/

<html> <head> <style type="text/css"> #maincontent {     width:950px;     height:100%;     margin:0 auto; } #header {     width:946px;     height:150px;     border:#000 solid;     border-width:2px 2px 1px 2px; } #leftcolumn {     width:395px;     height:703px;     border:#000 solid;     border-width:1px 1px 1px 2px;     float:left; } #toprow {     width:549px;     height:351px;     border:#000 solid;     border-width:1px 2px 1px 1px;     float:left; } #bottomrow {     width:549px;     height:350px;     border:#000 solid;     border-width:1px 2px 1px 1px;     float:left; } #footer {     width:946px;     height:150px;     border:#000 solid;     border-width:1px 2px 2px 2px;     clear:both; } </style> <body> <div id="maincontent">     <div id="header">header content</div>     <div id="leftcolumn">leftcolumn content</div>     <div id="toprow">toprow content</div>     <div id="bottomrow">bottomrow content</div>     <div id="footer">footer content</div> </div> </body> </html> 

Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -