CSS floats

I must admit that I was extremely confused when I was positioning divs with css today. I had two divs inside of another div. Something like the following.

<div id="container">
    <div id="blue">This is the blue div.</div>
    <div id="red">This is the red div.</div>
</div>

The css for the page was as follows:

div#container {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:solid #000000;
    border-width:5px;
}

div#blue {
    background-color:blue;
    width:50%;
    float:left;
}

div#red {
    background-color:red;
    width:50%;
    float:left;
}

What I expected and what I got were two different things.

Expected:

Actual:

Why did this happen? Well, apparently if you use the float option in css, it doesn’t mean that the divs will still look like they are in the container. The easiest way to fix this is with a   or a <br /> somewhere after the second div, though that also has its consequences. Probably the best way i’ve found is to use a div with a clear attribute:

<div id="container">
    <div id="blue">This is the blue div.</div>
    <div id="red">This is the red div.</div>
</div>

With the css for the div:

#clear {
    clear:both;
}

That works quite nicely!