What's the danger in not specifying widths for a floated element?

Question

My understanding is floated elements must have their widths specified, or else unpredictable rendering may ensure.

Is this true/false?

Is it acceptable to float elements like DIVs and not specify widths?

Answer 1

In general, you don't have to.

If you specify the width of a float element, its width will be as you specified.

If you don't - the width of the element will depend on its content. If there is no content - the width will be zero (unless you specified padding or border), if there is a long text in it - the element will probably expand up to the whole page (or the parent element). If, for example, you have an image in the float element, its width will be as of the image width and so on.

Answer 2

Not including a width on a floated element is unpredictable because the browser is left to determine how wide your float is.

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. Source: http://css.maxdesign.com.au/floatutorial/introduction.htm

Answer 3

If it is a floated block element it needs the width to be specified (width:auto is also ok), if it's an inline element you don't need to set a width since inline elements ignore width anyway.

Not adding a width will probably cause no difference in 90% of cases, but there are few situations when it makes difference due to browser bugs.

Answer 4

The only time I had a problem with floats with no widths was in IE6. I'd never tested the site on IE6 before and was showing it to a friend on their work computer which ran IE6. It completely trashed the page, and was kind of embarrassing.

When I got back to work I found and installed the wonderful IETester program, added widths on a couple elements, and now all works well. Get IETester here: http://www.my-debugbar.com/wiki/IETester/HomePage

Good luck, and remember: test on IE6 if you're relying on floats with no widths for important parts of your layout!