IE empty div has height

If you are scratching your head wondering why an empty DIV in IE has height, or why the height you specified for a DIV in IE does not come out as expected, here are the possible solutions:

font-size: 0;

line-height: 0;

undo zoom: 1;

Although you can use zoom: 1 to trigger hasLayout, if this is applied to an empty DIV, it will take up space even if it is empty. If you want an empty DIV to disappear, undo the zoom: 1; on it.

It literally took me weeks to finally figured out why the stupid empty DIV in my design kept taking up space. It was not possible to set the font-size or line-height to zero because sometimes the DIV had text in it. I finally figured out that it was because I accidentally did a mass assignment of

div { zoom: 1 }

  • Thanks alot for this post. Really saved me hours of pain, as I was having the same issue..

  • Damien

    Thanks mate, you save my life!

  • doug

    Solution:
    width:100%

  • Anonymous

    Thanksalot! Did not have the exact same problem, but “font-size: 0; line-height: 0;” fixed my issue of divider divs having height in some email clients (as outlook) when I only wanted them to have top border.

  • Onix32

    If it’s possible, try
    jQuery().empty();
    to make nodes “realy” empty, because in IE6/7 it is not so – there is empty text node child, which gives “unexpected” parent box height.