CSS min-height not behaving as expected -
three boxes, container, left box , main box.
/* left menu */ .leftmenu{ width: 200px; border:2px solid green; height:100px; float:left; min-height:100%; } /* main content area */ .mainbox{ border:2px solid red; min-height:100%; } .mainwrapper{ border:2px solid white; }
with html:
<div class="mainwrapper"> <div class="leftmenu"> left </div> <div class="mainbox"> main<br /><br /><br /><br /><br /> </div> </div>
my question is, why green box (left menu) overflowing outside wrapper?
to solve it, either have <div style="clear:both"></div>
before closing outer div or use clearfix (recommended) at: http://positioniseverything.net/easyclearing.html
Comments
Post a Comment