Why `float:left` doesn't work with a fixed width? - css

Question

I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.
This sounds so simple that I though the following Markup and CSS would give me the desired result:
<div class="left">Content</div>
<div class="right">Content</div>
div.left {
float: left;
width: 200px;
}
div.right {
width: 200px;
This doesn't work as expected, instead the right div appears on the next line as though it wasn't floated. This is best explained in this example webpage:
Example of the Problem
My question is WHY this doesn't work as expected? Not how to fix it.
Notes:
Please make sure you fully understand how floats work before answering this question.
Please make sure you view and understand the examples.
Both elements must be block, not inline.
I understand all fixes/hacks to make this work. I want to know why it doesn't work.
This appears to only work correctly in Opera.
Backing up your answer with documentation is required.

Answer 1

It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –

Answer 2

div.left {
float: left;
width: 200px;
height:200px;
background:red;
}
div.right {
float:right;
width: 200px;
height:200px;
background:blue;
}
see http://jsfiddle.net/3kUpF/
Alternatively, if you want them side by side then you can float:left on both
see http://jsfiddle.net/3kUpF/1/

Answer 3

Floating elements can flow "into" block elements, occupying the same line but pushing the contents (not the element itself) over. In this case, left is "inside" right, but there isn't any space left for the text on the right, so it goes underneath. To see what I mean, try setting the width of right to 300px instead of 200px - you should see the blue border "around" left, with the text flowing around it. To "fix" this, I'd suggest giving right a float of left or a display of block-inline.

Answer 4

Float both divs left.
Apply a positive left margin of width(div.right), in your case 200px.
Apply a negative left margin of width(div.left) + width(div.right), in your case, 200px + 200px = 400px.
div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }

Answer 5

The second element should be inline element.
div.right {
width: 200px;
display: inline;
}
If you do not want to make second element inline, just float it to the left too. But your container will collapse. You can fix it using clear:
<div id="container">
<div class="left">Content</div>
<div class="right">Content</div>
<br style="clear:both"/>
</div>
div.left {
float: left;
width: 200px;
border: 1px solid red;
}
div.right {
width: 200px;
border: 1px solid green;
float:left;
}
#container{
border: 1px solid black;
}
See example

Answer 6

You could add clear:both; your <p> tags. That would solve the problem. Without breaking the rest of the (example) page.

Answer 7

in case you want both containers to float besides each other, you can rather use a span instead of a div. That might bring the problem to an end.