width: auto; on Floats in IE

By , 5 July 2008

width: auto; on Floats in IE

I think CSS 2.0 required that widths be explicitely set on floated elements, but CSS 2.1 removed this restriction. Either way, Microsoft Internet Explorer 6.0 equates width: auto; with width: 100%; for floats. Not very helpful for building CSS menus. I searched the web and didn't find any workarounds, but I came up with this simple one myself:

element { float: left; _width: 0px; }

The underscore hack targets IE 6 but not IE 7 (which behaves correctly). IE6 also automatically expands the width of the block to fit when the specified width is too small, which is why this hack works. When I say 'works' I mean it in the Microsoft sense of the word of course.

Hope it helps!

width: auto; on Floats in IE

About Roger Keays

width: auto; on Floats in IE

I guess I'd call myself a problem solver. Either that, or I'm some sort of organic machine designed to convert oxygen into carbon dioxide. You could go either way on that. I'm into languages and stuff. I wrote a book. It's okay, I guess. What else? I like reading, swimming, eating, and playing music. Satisfied? Sheesh.

Leave a Comment

Please visit https://rogerkeays.com/blog/width-auto-on-floats-in-ie to add your comments.

Comment posted by: Max Williams, 6 years ago

Thanks Salam - that was the missing piece of the puzzle:

_width: 0px;
_white-space:nowrap; 

For bits of text with 2 or more words, to stop them wrapping, that is :)

Comment posted by: mcdst, 7 years ago

Need some help here. Tried this fix, but didn't work in my menu. I got 2 or more words in 1 link, .. How should I fix this?

 mcdst

Comment posted by: Daan, 7 years ago

 btw, with 2 or more words, I ofcourse mean: 'about me' or something ;)

Comment posted by: Mike McCloy, 7 years ago

 Thanks for posting this! Worked like a charm.

Comment posted by: , 7 years ago

You would also have a job if there were no defects in IE6. It would just be more interesting.

Comment posted by: Jason, 7 years ago

Thanks to IE6 bugs I still have a job.

Comment posted by: Computer hardware, 7 years ago

Thanks! This solution work for me! And I can apply with other problem on IE6, too.

Comment posted by: TheOnlyOne!, 7 years ago

Thanks a ton dude!! this saved hell lot of time!  I don't know why ppl still use stone age browsers like IE6. It's so unfortunate that we still have to support it :(

Comment posted by: SkaveRat, 8 years ago

great, thanks!

Comment posted by: Manjunath, 8 years ago

nice thinking dude.. it works and it helped me lot....

Comment posted by: ravi, 8 years ago

Hmm, I must be doing something wrong, because this doesn't work for me. I have a float:right DIV within another. The right floated DIV did not have a width specified and in Firefox, Safari and Chrome its size was auto-calculated to hold the contents. In IE7 the floated DIV takes up the entire width of the browser, popping out of the container DIV! You say above that this should not be an issue with IE7, but I tried the _width: 0px idea anyway, but that didn't help. If you have any hints on where I am going wrong, that would be great.

Comment posted by: Simon, 9 years ago

Handy hint, thanks.

If you want to keep your CSS hack-free, then set your dumb IE6 version

ul li {

   float: left;

   width: 0;

}

then override it for smart browsers using the child selector ">", thus

ul>li {

   width: auto;

}