[thelist] Easy CSS Riddle

[Kasimir K]

Great riddle!

> 1)	Why is it on the next line, even though SPAN is an in-line tag? Is
> this one of those browser-compatibility issues? Or am I misunderstanding the
> CSS model?

"The element generates a block box that is floated ... "[1]

So that span no longer is inline element.

> 2)	Okay, if this won't work (either by design or mis-implementation),
> what is a nice clean way of getting a simple one-line footer, with some text
> on the left, and some on the right, the baselines lined up, without
> resorting to a TABLE? 

As Joe suggested, floating both does the trick:
    <span style="width: 40%;  float: left;">Text 1</span>
    <span style="width: 40%; float: right;">Text 2</span>

>    3) Extra credit: What if I wanted some text on the left, the right, *and*
> in the middle, all on the same line?

Using spans? Just keep on floting:
    <span style="width:33%; float:left">Text 1</span>
    <span style="width:33%; float:left">Text 1.5</span>
    <span style="width:33%; float:left">Text 2</span>

Note that width property does not apply to inline elements (except 
replaced), so width here works only because float makes these spans to 
blocks. So this works too:
    <b style="width:33%; float:left">Text 1</b>
    <b style="width:33%; float:left; text-align:center">Text 1.5</b>
    <b style="width:33%; float:left; text-align:right">Text 2</b>

And coming to think of it, you can add more floated elements there, just 
keep the widhts <= 100% - but this is not limited to one-liners: you can 
create nice multicolumn fluid layouts with this appoach.

.kasimir


[1] http://www.w3.org/TR/CSS2/visuren.html#propdef-float