CSS Float Problem

Quite often when designing a web page, we want some elements on the left and some elements on the right. Typically, we would use the CSS float property to create this effect. "float:left;" forces the HTML element to the left side of its container, and "float:right" forces the HTML element to the right side of the container. You might already have used these properties, but have you ever had CSS float problems with the layout?. Consider this example:

<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.

Floats are very unique and have caused a mountain of headaches among developers. The solution to this problem is very simple. You just need to tell the browser that you have another element beneath the 2 floating elements so that the "divContainer" can wrap all of the inner elements. Let's see an example:

<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>

The difference of the two examples boils down to one particular element. That one new element, the "br" with the CSS property "clear" set to "both", solves the entire problem. I should tell you that the "br" can be replaced with other block elements, like a div, 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.