How to make a DIV match floating child's height (floating columns) and yet allow child elements to protrude on the sides

Question

I'm designing a layout with 3 columns, based on a div containing 3 floating divs.

The problem is the container div doesn't match the columns' height as I intend it to. It acts as if it had no content at all, and therefore the 3 columns protrude vertically.

To fix this I tried with overflow:hidden and it made the trick, but my design had a div that sticks out on the left that got messed up as this attribute won't let anything stick out.

Is there a better way to fix the height problem? Thanks.

Answer 1

you can usually make the container's height extend to the end of its children by throwing in a <div style="clear:both;"></div> right after all your children.. like this.

<div id="container">
    <div class="child0"></div>
    <div class="child1"></div>
    <div class="child2"></div>

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

I'm not sure if that is considered a hack or not by the community. but I use it sometimes. also, I've seen people not use a div, but an <hr> and apply that style as well.

Answer 2

Use a clearfix class - that should do the job:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Check http://jsfiddle.net/YyMjJ/1/