CSS min-height not behaving as expected

Three boxes, a container, left box and main box.

/* Left menu */
.leftMenu{
    width: 200px;
    border:2px solid green;
    height:100px开发者_StackOverflow;
    float:left;
    min-height:100%;
}

/* Main Content area */
.mainBox{
    border:2px solid red;
    min-height:100%;
}
.mainWrapper{
    border:2px solid white;
}

With the HTML:

<div class="mainWrapper">
    <div class="leftMenu">
        left
    </div>
    <div class="mainBox">
        main<br /><br /><br /><br /><br />
    </div>        
</div>

My question is, why is the green box (left menu) overflowing outside the wrapper?

To solve it, either have a <div style="clear:both"></div> just before closing the outer div or use clearfix (recommended) like at: http://positioniseverything.net/easyclearing.html

you must add 'div' element before mainWrapper with css clear attribute, because you use float:left on .leftMenu.

Here is corrected code:

/* Left menu */
.leftMenu{
width: 200px;
border:2px solid green;
height:100px;
float:left;
min-height:100%;
}

/* Main Content area */
.mainBox{
width:100%;
border:2px solid red;
min-height:100%;
}
.mainWrapper{
border:2px solid white;
}
.clear{ clear:both;}

and html

<div class="mainWrapper">
  <div class="leftMenu">
    left
  </div>
  <div class="mainBox">
      main<br /><br /><br /><br /><br />
  </div>
  <div class="clear"></div>        
</div>

because you have float:left on the left menu(green). You can put overflow:hidden on the container div and the container div will expand like the way you like.