[thelist] Easy CSS Riddle
Marcus Andersson
marcus at bristav.se
Mon May 10 16:48:28 CDT 2004
I have a follow-up question on my own proposal.
You can find a page at http://mweb.se/test/test.html where you find some
fields. If you look at it in Firefox it looks as I expected but if you
look at it with IE6 (I don't have access to another) you can see some
padding between blue-purple and between purple-yellow.
Where do that come from and how do I get rid of it (without using
margins that screw things up in Firefox)?
The css look like this:
div {
height : 600px;
}
.left {
width : 100px;
background-color : blue;
float : left;
}
.right {
width : 100px;
background-color : yellow;
float : right;
}
#wrapper {
background-color : purple;
text-align : center;
}
.middle {
margin : 0 auto;
width : 500px;
background-color : red;
text-align : left;
}
And the html like this:
<div class="left">left</div>
<div class="right">right </div>
<div id="wrapper"><div class="middle">middle</div></div>
/Marcus
Marcus Andersson wrote:
> 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