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

Roger Keays is an artist, an engineer, and a student of life. He has no fixed address and has left footprints on 40-something different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, the proper use of semicolons, and finding good food.

Leave a Comment

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

Comment posted by: Max Williams, 12 years ago

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

_width: 0px;

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

Comment posted by: mcdst, 13 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?


Comment posted by: Daan, 13 years ago

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

Comment posted by: Mike McCloy, 13 years ago

 Thanks for posting this! Worked like a charm.

Comment posted by: , 13 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, 13 years ago

Thanks to IE6 bugs I still have a job.

Comment posted by: Computer hardware, 13 years ago

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

Comment posted by: TheOnlyOne!, 13 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, 14 years ago

great, thanks!

Comment posted by: Manjunath, 14 years ago

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

Comment posted by: ravi, 14 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, 15 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;