[thelist] Easy CSS Riddle

Mon May 10 16:02:18 CDT 2004

Easy for someone, at least. Given the following simple example page (which I
have posted to http://www.shoestringcms.com/test.html):

     <html>
     <body>
        <span style="width: 40%;">Text 1</span>
        <span style="width: 40%; float: right;">Text 2</span>
     </body>
     </html>

What I get is "Text 1" on the left, and "Text 2" on the right, as expected,
but "Text 2" is to the right *and* on the next line, not the same line, as I
expected. You probably want to know that I am looking at it in Win XP IE
6.0, but I get the same results on Netscape 7.02. (Interestingly, Netscape
4.7 places it almost, but not quite, all the way to the left on the next
line, which is more than I expected.) I have tried playing with the widths,
margins, and padding, and making the first SPAN float left, but to no avail.
I present it here stripped to its bare essentials.

So:

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?

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? 

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

Thanks in advance!

John Brooking, Application Developer
Sappi Fine Paper
-- 

This message may contain information which is private, privileged or
confidential and is intended solely for the use of the individual or entity
named in the message. If you are not the intended recipient of this message,
please notify the sender thereof and destroy / delete the message. Neither
the sender nor Sappi Limited (including its subsidiaries and associated
companies) shall incur any liability resulting directly or indirectly from
accessing any of the attached files which may contain a virus or the like. 