On 2008-10-08, Anze <anzenews@volja.netwrote:
Quote:
>
For completeness:
http://css.maxdesign.com.au/floatuto...troduction.htm
>
Quote:
-----
Do floated items need a width?
You should always set a width on floated items (except if applied directly
to an image - which has implicit width). W3C's Cascading Style Sheets,
level 2, CSS2 Specifications states:
"A floated box must have an explicit width..."
http://www.w3.org/TR/CSS2/visuren.html#floats
If no width is set, the results can be unpredictable. Theoretically, a
floated element with an undefined width should shrink to the widest element
within it. This could be a word, a sentence or even a single character -
and results can vary from browser to browser.
-----
>
It looks like all major browsers shrink float elements to the widest element
within, but there is no guarantee. W3C certainly doesn't specify it.
|
They do specify it in CSS 2.1. You're looking at CSS 2. The recent
generation of browsers (Firefox, Opera, WebKit) are all aiming for CSS
2.1 plus bits of CSS 3 where they feel like it.
Floats get shrink-to-fit width which is clear most of the time, although
the spec does say it doesn't "define the exact algorithm".
I have seem some differences between browsers in cases where the auto
width float contains both a left and a right float or when it contains
pre-formatted text.
10.3.5:
If 'width' is computed as 'auto', the used value is the
"shrink-to-fit" width. Calculation of the shrink-to-fit width is
similar to calculating the width of a table cell using the automatic
table layout algorithm. Roughly: calculate the preferred width by
formatting the content without breaking lines other than where
explicit line breaks occur, and also calculate the preferred minimum
width, e.g., by trying all possible line breaks. CSS 2.1 does not
define the exact algorithm. Thirdly, find the available width: in
this case, this is the width of the containing block minus the used
values of 'margin-left', 'border-left-width', 'padding-left',
'padding-right', 'border-right-width', 'margin-right', and the
widths of any relevant scroll bars. Then the shrink-to-fit width is:
min(max(preferred minimum width, available width), preferred width).
