Why are my divs overlapping?

They are overlapping because you are floating a div, but aren’t clearing the float.

Use the clearfix method to clear the float. Add a class container to your container divs and use this CSS:

http://jsfiddle.net/57PQm/7/

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

You’ll also notice that I’ve removed your inline CSS. This makes your code easier to maintain.