Post Archive
› December 12, 2003
Where every browser gets it wrong
I've said it before and I'll say it again: According to [CSS2], there is no way to get a float to size according to it's content.
This is pointed out by the following passage from [CSS2] 9.5 Floats:
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). ...
"What", you say, "about width: auto; then? That does it in all browsers, and people tell me it's okay according to CSS."
Well, sadly, that is a misunderstanding because people doesn't have a closer look at why the width property must be explicitly specified for floats. You see, the reason for that need for explicitly set widths is just that the value auto should compute to zero, as specified by [CSS2] 10.3.5 Floating, non-replaced elements
If 'left', 'right', 'width', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.
So, no there is no way to make a float size according to it's content - unless you want to rely on a bug exhibited by all browsers. Finally, a small testcase.
Comments
1. December 12, 2003 09:37 PM
2. December 12, 2003 09:48 PM
Alex Posted…
I was just trying to figure out how in the hell to do that today, and I finally gave up. Glad I'm not crazy.
By the way, nice lookin site.
3. December 12, 2003 09:52 PM
liorean Posted…
Well, it does seem to do that in some cases, yes. However, it does not do so in the very simple testcase I supplied. No browser does. (Of those tested at least. Ie5.2m, ie5w, ie5.5w, ie6w, op7, moz1.5, ns6.0 (moz M18), saf1.1)
4. December 12, 2003 10:40 PM
liorean Posted…
As Mats Palmgren noted, this will get amended in [CSS2.1] 10.3.5 Floating, non-replaced elements.
5. December 16, 2003 10:04 AM
Karl Dubost Posted…
It has been fixed in CSS 2.1 and you have a new property which is implemented in Safari for example.
inline-block : If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
.foo { display: inline-block;}
Scrivs Posted…
I learned this the hard way when checking my site in Opera and realizing that it actually follows this rule to the spec.