Nested divs with float

Question

I am trying to nest three divs within an outer div. problem is the nested divs are not making the outer one grow.

The CSS is as follows:

.page {display: block;  width: 96%;}
.page .left-content {display: inline-block; float:left; width: 15%;}
.page .middle-content {display: inline-block; float:left; width: 70%;}
.page .right-content {display: inline-block; float:left; width: 15%;}

The html I am looking to do:

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
</div>

giving a background color to the page class shows that the page class div is not of the correct size. How do i solve this?

Answer 1

The wrapper must clear the content DIVs.

.page {
    overflow: hidden;
    *zoom: 1; /* for ie6/7 */
}

No extra markup is needed. Also have a look at Aslett's clearing method: http://www.positioniseverything.net/easyclearing.html