Empty Div With Width Displays Height in IE

I have a wrapper div that contains a user control that may or may not always display content. If it doesn’t have content, then the div should be empty and empty divs shouldn’t have any height right? Well, all the browsers agree with me – except Internet Explorer. Apparently since I’ve given this div a width, even though its empty, IE still decides to render height equivalent to the set font-size.

So can’t I just add a height:0; rule to my css? Well that will work – until the control within my div decides to render content and now its hidden.

So the fix? Add an html comment within the div. Yep, sounds crazy – but if your empty div is empty, save for an html comment, it will now not render any height.

Here’s how the fix looks like:

Yay Microsoft! Your rules for HTML parsing makes perfect sense!