Clearing CSS Floats

The most common problem of floats is its un-accommodating nature that prevents the floats from stretching up to extra limits. So if you want to add borders around the floats, you need to specially command the browsers somehow to stretch the container to enhance its accommodating nature.

In case you want to add black border around both the floating columns in a stringent floating container, you would not be allowed to do the same. Since the float container has no height and width, so the border stubbornly resides on the top of the floating columns.

Old solution

The old solution of this problem did not have the cutting edge technology on it. It included addition of an extra element with “clear: both” to the container. Once it resided in place the container would contain a non-floating element, which would automatically stretch the containers to accommodate further floats.

This can be also done either…

1. By adding an extra element in the HTML source code
2. By using “:after” pseudo-class to generate it

Since the explorer [Win and Mac] does not support the “:after” option, so the second solution is of lesser importance than the first one.

However, while the old solution has been pushed to the back burners, it’s the new solution that is taking its ground.

New Solution

The solution can be expressed through code below:

div.container {
    border: 1px solid #000;
    overflow: auto;
    width: 100%
}

The width is specially needed to trigger “hasLayout” in Explorer Windows. This code will allow the border to neatly fit around the floated elements.

Some of the other points that merit unique solutions for floats:

• Some of the browsers will be comfortable with a certain width or height for the float container div
• The tricks of clearing float bugs works with three of the four overflow values: auto, hidden and scroll. Using the last value will show a set of scrollbars, irrespective of their needs to be displayed
• The browser might also show scrollbars when the content escapes beyond the specific width and length
• The width or height declaration is required to make the effect work in Explorer Windows. If you do not include it Explorer Windows will continue to show the border at the top of the columns, as if there were no overflows.
• A width of 100% is a lucrative starting point, although further complicated layouts may require other values

Problems of new solution

The problem of new solution is stark. It may cause littering of unwanted scrollbars if content escapes from the container box. But a code “overflow: hidden makes sure that none of the scrollbars will be visible. Some of the content might get hidden in the process, but the advantages are more lucrative:

1. The width of the combined floats will never exceed the width of the container, and also preferably remain slightly smaller to allow even more flexibility
2. The height of the container remains absolutely flexible [as much as desired]

So the ultimate right effect…

div. container {
    border: 1px solid #000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

Popularity: 9% [?]

Categories: Floating Theory, Posted on January 5, 2008 by Choppr | Log in