CODEWITHSUNDEEP
css
Tom Gullen
Tom Gullen

Reputation: 61727

CSS min-height not behaving as expected

enter image description here

Three boxes, a container, left box and 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 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?

Upvotes: 1

Views: 1050

Answers (3)

kirca
kirca

Reputation: 46

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.

Upvotes: 0

Adhip Gupta
Adhip Gupta

Reputation: 7163

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

Upvotes: 2

LuiGi
LuiGi

Reputation: 220

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>

Upvotes: 1

Related Questions