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!

Comment posted by: Simon on 31 July 2008, 5:58 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: Raziel on 18 January 2009, 5:01 AM

You saved my time. Thanks a lot! :)

Comment posted by: Clarence on 1 June 2009, 10:35 PM

Thank you!!!!!!! I been working on this for two days!

Comment posted by: Mark on 9 June 2009, 6:56 AM

Very nice Simon. I've seen that trick at some point but forgotten. After spending far too much time screwing with IE today your fix is very welcome.

You know if I could have back all the hours that Microsoft has stolen from me I'd have a very long vacation on my hands...

Comment posted by: Erkan Ceran on 15 June 2009, 11:24 PM

yes its working really!! thank you so much! if you give width:0 on ie6, width is stretch of content's width. if you want to menu or some have white space content, you can use white-space:nowrap. I make a horizontal menu and now no problem for others browsers!

Thank you again! Accepted Solution ;)

Comment posted by: Marta on 31 July 2009, 6:14 AM

Wow! I would never imagine this! Thank you!

Comment posted by: ravi on 7 August 2009, 12:18 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 October 2009, 4:55 PM

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

Comment posted by: SkaveRat on 29 October 2009, 8:39 PM

great, thanks!

Comment posted by: Jacek on 4 February 2010, 8:48 AM

Thanks!!!!!!!

Comment posted by: wds on 13 February 2010, 7:23 PM

hfhfhf