CSS Float Problem

When designing a website or making website layout, we want some elements to align on the right or on the left of the web page. Usually, we use CSS float property (“float:left/right”)to align the elements. The left value of float property aligns an element to the left and right aligns an HTML element to the right. You might have used the CSS float property, but have you ever had the CSS float problems with the layout? Consider example blow:

<style>
#divContainer {
    background-color:#CCC;
    width:400px;
}
#div1 {
    background-color:#000;
    height:200px;
    width:200px;
    float:left;
}
#div2 {
    background-color:#666;
    height:300px;
    width:200px;
    float:right;
}
</style>
<div id="divContainer">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

In most browsers, the CSS float problem will occur. But, do you actually see the error? Notice in the “divContainer” element that it has a background color set to “#CCC”. Why does that container’s background color not show in our browser? It does not show because the “divContainer” does not know what to wrap around. It is basically confused by the position of our elements. Try setting “div2″ to “float:left;” and “div1″ to “float:right”. It will still break in most browsers even with the larger div being the first element.

CSS float problem will occur in most browsers. But the error is invisible and cannot be seen. Notice the “divContainer” element, it has a gray (#CCC) background but, it does not show the color in the browser and why? Because the div is not aware of wrapping around itself, and it’s basically confused by the positions of “div1” and “div2”. If we try to change the alignment of “div1” and “div2”, the “divContainer” element will not show the background and it will still break in most browsers.

In each web page designing, CSS float is used a lot and it’s a headache for the designers. The solution to this issue is very simple. We just need to tell the browser that you have another element under the two floating elements and the “divContainer” can wrap all the inner elements. Shown in example below:

<style>
#divContainer {
    background-color:#CCC;
    width:400px;
}
#div1 {
    background-color:#000;
    height:200px;
    width:200px;
    float:left;
}
#div2 {
    background-color:#666;
    height:300px;
    width:200px;
    float:right;
}
</style>
<div id="divContainer">
    <div id="div1"></div>
    <div id="div2"></div>
    <br style="clear:both;" />
</div>

Different between first example and second example is that “br” HTML element with the “clear” CSS property set to “both” solves the problem. And “br” can be replaced with other HTML element, such as div but, it should have the same property to have the same effect. It is the HTML’s CSS property that does all of the work. All the CSS float property does is tell the browser where the bottom of “divContainer” really is. That is how you solve the annoying CSS float problem of div wrappers.