[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