[thelist] Easy CSS Riddle
Marcus Andersson
marcus at bristav.se
Mon May 10 16:21:32 CDT 2004
This may be what you're after (though I don't really know). It have one
div to the left, another in the middle (not centered but I think I can
do it though) and another one in the far right.
<html>
<head>
<style>
div {
height : 600px;
}
.left {
width : 100px;
background-color : blue;
float : left;
}
.middle {
width : 600px;
background-color : red;
float : left;
}
.right {
width : 100px;
background-color : yellow;
float : right;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">middle</div>
</body>
John.Brooking at sappi.com wrote:
> 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
More information about the thelist
mailing list