Posted by Chris Beall on 12/11/05 00:30

Frank Rizzo wrote:

> I have the following code.
> <span style="width:100px;background-color:Red;">text</span>
> <span style="width:100px;background-color:Green;">test</span>
> <span style="width:100px;background-color:Blue;">test</span>
>
> In IE, it displays just like I intended: 100 pixels of red color,
> followed by 100 pixels of green color, followed by 100 pixels of blue
> color all on the same line.
>
> Firefox ignores the 'width' attribute. It only displays the red color
> enough to display the word 'test'. I can't use the DIV tag because it
> forces a line break. I need all this stuff to be on the same line.
>
> What can I do to replicate the behaviour above in Firefox?
>
> Thanks.
Frank,

The width property "... does not apply to non-replaced inline-level
elements.". (http://www.w3.org/TR/CSS21/visudet.html#propdef-width) It
appears that your example represents a non-replaced inline element, so
Firefox is correct. (In a disagreement between IE and Browser X, IE is
usually wrong.)

Do you want all three items to be on the same line even if the
containing block is less than 300px wide? If they are, this will create
a horizontal scroll bar, generally viewed as a Bad Thing.

If you replace span with <div style="float: left"> the three items
should line up shoulder to shoulder if there is more than 300px of width
and will gracefully stack themselves if the containing block width is
reduced below that. If you also change the width from 100px to 33%,
they will each occupy 1/3 of the containing block, regardless of its width.

You will also want to look at the clear: property to ensure that your
three items don't overlap preceding and following elements.

Chris Beall

[Back to original message]