Nested divs with float

I am trying to nest three divs wit开发者_开发技巧hin 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?

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

The magic clearfix

The standard method of making an outer container appear to "enclose" a nested float is to place a complete "cleared" element last in the container, which has the effect of 'dragging' the lower edge of the containing box lower than the float.

Thus the float appears to be enclosed within the container even tho it really isn't. The code for a cleared box usually looks something like this:

<div> <!-- float container -->

  <div style="float:left; width:30%;"><p>Some content</p></div>

  <p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

I added a clear and made sure each content div had it's margin and padding zeroed

http://jsfiddle.net/c4KLc/3/

.page .right-content, .page .left-content, .page .middle-content 
{
    border: none;
    padding: 0; 
    margin: 0;
}

.clear { 
    clear: both; 
    line-height: 0;
}

If any of your floating divs have padding, border, or margin styles the floating width will be off since you're doing % width

Change your html to

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
    <div style="clear: both;"></div>
</div>