If you want to make a div of a height smaller then around 10px, often in Internet Explorer will not make the div any smaller than around 12px. This is a real pain if you want to use div’s to create lines and various other things. Thankfully I’m here to tell you how to get around this problem.

The Solution

All you need to do is in your CSS is set the overflow as hidden.

overflow: hidden;

Here’s an inline example.

<div style="width:100%; height:1px; overflow:hidden; background-color:#000;"></div>

So why won’t Internet Explorer let it go less then 12px without this?

When you make a div in IE it will automatically stretch to the size of the content and not the height that you’ve set in your CSS. In typical IE fashion, it will always think there is text inside the div even when there isn’t, thus forcing the div to fit the size font you have set. Telling it to hide the overflow will then tell it “we don’t care if it goes over, just hide it!” fixing our problem. You can also change the font-size to smaller which IE will then allow the div to shrink to the height of the smaller font-size you’ve set. The overflow option is probably better, but both will do the trick. Now we have solved another Internet Explorer problem… There’s still more to come, so keep a look out!