[thelist] Easy CSS Riddle

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
> 
> 