Home » Blog » width: auto; on Floats in IE

width: auto; on Floats in IE

Posted by Roger Keays, 5 July 2008, 9:01 PM

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!

<< position: fixed on IE6 Back to Blog Neal Gafter on Java 7 Language Proposals >>

Comment posted by: Simon on 31/07/2008 5:58:26 PM

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;

}

Comment posted by: ravi on 07/08/2009 12:18:08 PM

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: Manjunath on 23/10/2009 4:55:40 PM

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

Comment posted by: SkaveRat on 29/10/2009 8:39:22 PM

great, thanks!

Comment posted by: TheOnlyOne! on 01/07/2010 6:27:10 PM

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: Computer hardware on 08/07/2010 6:19:29 PM

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

Comment posted by: Jason on 15/07/2010 3:53:14 AM

Thanks to IE6 bugs I still have a job.

Comment posted by: Roger Keays on 15/07/2010 4:46:58 AM

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

Comment posted by: Mike McCloy on 09/09/2010 3:36:29 AM

 Thanks for posting this! Worked like a charm.

Comment posted by: Daan on 24/09/2010 7:48:59 PM

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

Comment posted by: mcdst on 14/12/2010 4:23:36 PM

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: Max Williams on 05/10/2011 6:50:05 PM

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 :)