Containing Floats Made Easy Demo

« Back To Tutorial

Method #1: overflow: hidden;

This container has overflow: hidden; applied to it, and it "haslayout". This container contains it's floats in all browsers.

Float

Container

This container does NOT have overflow: hidden; applied to it, but it "haslayout". View this in IE to see that this container does indeed contain it's floats.

Float

Container

Method #2: clearfix

This container has the class of clearfix applied to it. This container contains it's floats in all browsers.

Float

Container

Method #3: clearing div

This container has an extra div thrown in below it with the class of clear. This container contains it's floats in all browsers.

Float

Container

Method #4: floated parent

This container is floated also. Therefore, this container contains it's floats in all browsers.

Float

Container

Method #5: display: inline-block;

This container simply has display: inline-block; applied to it. This container contains it's floats in all browsers.

Float

Container

Method #6 display: table;

This container has display: table; applied to it, and it "haslayout". This container contains it's floats in all browsers.

Float

Container

Method #7: position: absolute;

This container has position: absolute; applied to it. This container contains it's floats in all browsers.

Float

Container