Left, middle, right div - 3 column question

[hutchmeister]

Hi all,

I realise that the 3 column layout with divs/css has been discussed and re-discussed many times, but I've never seen an explanation WHY the seemingly simple and obvious way of doing it doesn't work.

Could someone give me a technical explanation? Even a "FireFox is bugged" or "you are an idiot, here's what you've done wrong" will do me :)

Here's what I think SHOULD work:

<div style="width:100px; height:20px; float:left; border: 1px solid red;">
hello left
</div>
<div style="width:100px; height:40px; float:right; border: 1px solid blue;">
hello right
</div>
<div style="width:100px; border: 1px solid green;">
1<br />2<br />3<br />4<br />5
</div>

I'm not asking for a work around or alternative method, just want to get this cleared up in my mind. Thanks. Ben

[Robin_reala]

OK, Firefox and Opera are doing this right, and here's why:

1) Your first div is a set width and height and floated left. Fine: it goes to the top left of the screen.

2) Your second div is a set with and height and floated right. First of all, because the div above it is floated left and there's space for it to sit next to it, it goes up. Then, because it's floated right it moves to the right hand side of the screen.

That's the easy bit :)

3) Your third div has a set width but no set height (it relies on the content). It's also not floated . So what happens? Well, floats protrude into it. For example, imagine a floated imaged followed by a paragraph. Would you expect the paragraph to sit up next to the image? Nope, you'd expect the text inside it to flow of out the way, but for the paragraph itself to sit normally. Well, this is exactly what's happening here. Because they're the same width all of the text is being pushed down, but if you made your last div 200px wide you'd see that the number '1' would sit to the right of the first div. You can also see (if you take off the red border from the first div) that the 3rd div is sitting directly underneath it.

Does this answer your question? I do think the best way of thinking about it is to image divs one and two as being images, and div 3 a paragraph. Then the observed behaviour seems more natural.