go top

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.

5 Comments to "CSS Float Problem"

  • Alkis Mansouris

    Alkis Mansouris

    September 17, 2014 at 20:24 pm

    Quote Bob :

    "s there any way to achieve this with pure css? "

    Bob it's pure css , i do not undestand your question.

    You could also try intead of

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

    to

    <div id="div3"></div>

    and css

    #div2 {
    clear:both; }

    and width:100%;

    or whatever your project has to be.

  • acantjong

    acantjong

    April 18, 2014 at 17:15 pm

    When our css wont works, i recommend check our css code first with css3 validator.

  • Bob

    Bob

    February 11, 2014 at 02:55 am

    Is there any way to achieve this with pure css?

  • Helal

    Helal

    December 21, 2013 at 09:58 am

    Very Good

  • sathish.s

    sathish.s

    March 12, 2013 at 13:45 pm

    thanx for this lesson which you gave us...!

    With Regards
    sathish.s

Add your comment

Captcha
    • CSS Buttons Genertaor

      Use our FREE CSS Button Generator to create colorful multi-purpose buttons for your website!

      Free CSS button generator
    • PHP Scripts

      Check our extensive collection of top-notch PHP Scripts that will enhance your website!

      Commercial PHP scripts