Major problem with 100% height div

Question

/* Left menu */
.leftMenu{
    width: 200px;
    border:2px solid green;
    float:left;
    background-color:#c0c0c0;
}

/* Main Content area */
.mainBox{
    border:2px solid red;
    background-color: #ffffff;
}
.mainWrapper{
    border:2px solid white;
}

With

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

How the blazes do I get the left menu to extend to the bottom?

Please note I've tried faux columns but they just don't work as the white main box just is at the front for some reason.

Answer 1

What about this?

http://jsfiddle.net/PH3t2/

I've added postion:absolute , top:0 and bottom:0 to your leftmenu

I've given mainBox padding-left: 205px

I've given mainWrapper position:relative

Feel free to add content to mainBox to see that leftMenu grows as well.

---

To finish this off and make it work in IE6, add:

.leftMenu, .mainBox {
    min-height: 250px;
    height: auto !important;
    height: 250px;
}

Answer 2

you need set a fixed height for the .mainWrapper for example 100px; and then you set the height of .leftMenu to 100%;

Edit: According your comment, I am not sure if it possible with pure css. If it's acceptable a javascript solution then you can use jquery and the following code:

$(document).ready(function(){
    $('.leftMenu').css("height",$('.mainWrapper').height());
});

Live example: http://jsbin.com/udowu4/2

Answer 3

When using faux columns, you need to set background image to .mainWrapper.

Set .mainBox background to transparent and make .mainWrapper background as 200px gray at left side and all other width to white.

Answer 4

CSS Faux columns is the best possible solution. The following solution might work but you could end up with other problems. Note: This works regardless of which column is taller.

.leftMenu {
  width: 200px;
  float: left;
  background-color: #C0C0C0; /* C0C0C0 is used for demonstration
                                ideally this should be same as the
                                border color used in the next style */
}
.mainBox {
  border-left: 200px solid #CCCCCC;
}
.mainWrapper {
  border: 2px solid #000000;
  background-color: #F8F8F8; /* this should be set to the color that displays
                                behind mainBox; its best to set it here in case
                                the left column becomes taller than main column */
}

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