CSS min-height not behaving as expected -


enter image description here

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

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -