Re: Applying width to floated elements

On Feb 10, 4:43*am, dave <u... (AT) example (DOT) net> wrote:

[...]

However, after checking my stylesheet using the W3 validator, I got the
following warnings:

#topbar li * * *In (x)HTML+CSS, floated elements need to have a width
declared. Only elements with an intrinsic width (html, img, input,
textarea, select, or object) are not affected

#topbar a * * * In (x)HTML+CSS, floated elements need to have a width
declared. Only elements with an intrinsic width (html, img, input,
textarea, select, or object) are not affected

I don't get this since the browsers all appear to use the width of the
text contained in the floated elements, which is surely how it should
be. So what is this warning all about?

The CSS checker can be confusing because on the one hand, it will
determine that your document conforms to the CSS spec. without any
errors, thusly:

Congratulations! No Error Found.
This document validates as CSS level 2.1 !

....which is what I found in submitting a document like yours to be
checked.

On the other hand, the checker will sometimes issue "warnings" such as
the ones you described above even if the document has no errors.

In your case, I would just ignore the warning.

The previous version of CSS (CSS2) did indeed require that floats have
either an intrinsic or explicitly defined width, see:

<http://www.w3.org/TR/CSS2/visuren.html#floats>

"A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced
elements)." (From the second paragraph of section 9.5)

The CSS2.1 spec makes no mention of such a requirement:

<http://www.w3.org/TR/CSS21/visuren.html#floats>

At least one older browser (MacIE5) would take the CSS2 spec at its
word, and if a floated element had no defined width, would sometimes
expand the width to be 100% of the space available in the containing
block. Other browsers seem to to treat the float with a "shrink to
fit" model. I'm not actually sure this model is defined to be the
"correct" behavior anywhere, but that's the way browsers these days
seem to work.

Nick

--
Nick Theodorakis
nick_theodorakis (AT) hotmail (DOT) com
contact form:
http://theodorakis.net/contact.html

On 2009-02-10, Nick Theodorakis <nick.theodorakis (AT) gmail (DOT) com> wrote:

On Feb 10, 4:43*am, dave <u... (AT) example (DOT) net> wrote:
[...]
The previous version of CSS (CSS2) did indeed require that floats have
either an intrinsic or explicitly defined width, see:

http://www.w3.org/TR/CSS2/visuren.html#floats

"A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced
elements)." (From the second paragraph of section 9.5)

The CSS2.1 spec makes no mention of such a requirement:

http://www.w3.org/TR/CSS21/visuren.html#floats

At least one older browser (MacIE5) would take the CSS2 spec at its
word, and if a floated element had no defined width, would sometimes
expand the width to be 100% of the space available in the containing
block. Other browsers seem to to treat the float with a "shrink to
fit" model. I'm not actually sure this model is defined to be the
"correct" behavior anywhere, but that's the way browsers these days
seem to work.

It is defined to be the correct behaviour, see
http://www.w3.org/TR/CSS21/visudet.html#float-width

But the "exact algorithm" for determining shrink-to-fit width is not
defined.

If you had a parent float containing a left float and a right float
Firefox used to make the parent as wide as the available width (don't
know if it still does that) as if the left and right float would
"prefer" to be as far apart as possible.

Most browsers instead make the parent's preferred width the sum of the
preferred widths of the two floats inside it.

In article <slrngp35oq.61l.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

If you had a parent float containing a left float and a right float
Firefox used to make the parent as wide as the available width (don't
know if it still does that) as if the left and right float would
"prefer" to be as far apart as possible.

Most browsers instead make the parent's preferred width the sum of the
preferred widths of the two floats inside it.

Yes. Mac IE5 is my only browser that prefers to do the stretch-to-fit.
(I will never, ever, ever, chuck my Mac IE5 out, I keep it as a pet).

Latest FF falls into line and shrinks parent-float to fit.

--
dorayme