[thelist] Easy CSS Riddle
Kasimir K
evolt at kasimir-k.fi
Mon May 10 18:08:06 CDT 2004
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
More information about the thelist
mailing list