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
Post a Comment