html - CSS: Three Column Layout problem

Question

How can I modify this:

<div style="border: solid 1px red; text-align: center">
    <div style="background-color: yellow; float: left">left</div>
    middle
    <div style="float:right; background-color: yellow">right</div>
</div>

So that "right" is in line vertically with "left"?

Here's what my bad css looks like rendered:

left                 middle
                                            right

thanks!

Answer 1

If you use a ‘float: right’, make it the first thing on the line:

<div style="border: solid 1px red; text-align: center">
    <div style="float:right; background-color: yellow">right</div>
    <div style="background-color: yellow; float: left">left</div>
    middle
</div>

Otherwise it always falls into the next text line.

but why!!!!!

(1) Because once you've started putting static text on a line, you've got an indeterminate width to fit a floated element into. Say you wrote:

abc abc abc <div style="float: left">xyz xyz</div> abc abc abc

Now imagine you start resizing that window down so that “abc abc abc” just fits on the first line. Now you meet a float, and try to include it on the line you're on. But it doesn't fit: to fit it on, you'd have to have “abc xyz xyz” on the line, reflowing the remaining “abc” to the next line. But! Now you've moved the float's insertion point down a line, so the float has to drop down a line too. But! Now the first line isn't wrapped properly, because there's room for three “abc”s, but the line has been ended prematurely to make way for a float that actually occurs further down the page...

The CSS standard solves this logical impasse by making a float on a line with inline text before it wait for the next line.

(2) Because that's what Netscape did with <img float="right"> many, many years ago.