CSS: Divs don't line up left and right

Question

I have 2 divs. I want 1 div to be on the left side of my window and the other on the right side. I did this correctly with my logo and a little text next to it. However, under that I would like to have yet another 2 divs. I put those 2 divs in 1 div with style clear:both; this div lines up nicely under the two others. But once I do float: right; with the 2nd div, it goes outside the main div... Why?

The code: (This should be lined up to the left)

#menu {
    background-color:#485D9C;
    margin-left:10px;
    text-align:center;
    width: 200px;
    position:absolute;
    float:left;
}

(This should be lined up to the right)

#content {
    text-align:right;
    width:600px;
    position:absolute;
    float:right;
}

(This is the div where both "content" and "menu" are in)

#middle {
    clear:both;
    border: thick solid;
    position:relative;
}

Answer 1

Do you have an example ? With this little test: http://jsfiddle.net/BouFe/uHJQB/1/ it works !

Answer 2

Whenever I am using floats, I put a div, with "clear: both;" applied to it, inside of the container that holds the elements that have the float applied to them. An example of this can be found here , which I think is what you were looking for.

Answer 3

try placing an outer div and set the position: relative; and the inner elements mark their position as absolute

Answer 4

Don't know exactly what's going on without seeing your code, but I'm wondering if you're simply just no clearing your floats?

http://www.quirksmode.org/css/clearing.html