CODEWITHSUNDEEP
htmlcsscss-float
Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

Nested divs with float

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?

Upvotes: 2

Views: 10406

Answers (4)

madr
madr

Reputation: 665

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

Upvotes: 6

Thomas
Thomas

Reputation: 5856

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>

Upvotes: 0

Kriem
Kriem

Reputation: 8705

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>

Upvotes: 2

hunter
hunter

Reputation: 63512

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

Upvotes: 1

Related Questions