Thu, 2010-09-09 10:48
I have set up liquid 2 column layout where sidebar has fixed width and is floated left. Main content has margin the same as sidebar's width. The problem is that if I clear floats inside the main content, it clears the sidebar too and moves the content down.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Float test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #wrap { min-height: 100%; margin: auto; position: relative; background:cyan; } #left-col { float:left; width:200px; background:grey; } #right-col { position: relative; margin-left: 200px; background:#cccccc; } .flbox {float:left; width:50px; height:50px; margin:10px; background:red;} .clear {clear:both;} </style> </head> <body> <div id="wrap"> <div id="inner-wrap"> <div id="left-col"> <p>this is left floated column this is left floated column this is left floated column this is left floated column</p> <p>this is left floated column this is left floated column this is left floated column this is left floated column</p> <p>this is left floated column this is left floated column this is left floated column this is left floated column</p> <p>this is left floated column this is left floated column this is left floated column this is left floated column</p> <p>this is left floated column this is left floated column this is left floated column this is left floated column</p> </div> <div id="right-col"> <p>this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column</p> <p>this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column</p> <div> <div class="flbox"></div><div class="flbox"></div><div class="flbox"></div><div class="clear"></div> <div class="flbox"></div><div class="flbox"></div><div class="flbox"></div><div class="clear"></div> </div> <p>this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column</p> <p>this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column this is right column</p> </div> <div class="clear"></div> </div> </div> </body> </html>
I know that if I floated also the right column, there wouldn't be such problem, but I want it to take the rest of the width. 200px width is definite and % can't be used here. Can anybody help? My first liquid layout and I have run into such a stupid problem. Example can be seen also here.
