Getting Overflow Hidden to Work in IE

This is an easy fix, but I thought it was worth a post anyway, in case someone comes across it.

Setting overflow: hidden on a block element does not work in IE, if width and height are not set. But, it does in other standards aware browsers.

You may come across this situation if you have an element nested inside another element where width and height are set, and the nested element is inheriting the dimensions of the parent element. In that case, there is no need to set width and height usually. Well, in IE, overflow: hidden will not work if no dimensions are specified.

So as you may have already guessed, the fix is pretty simple. Setting a width and height on the element, or even just a width, will cause IE to obey the property.

I’m not sure if IE is doing the correct thing or not, in this case. It does make sense that you would have to specify dimensions, so that the browser will know where to cut it off at. It seems though, that IE is dumb here, as other browsers assume the inherited dimensions. I’ll leave that up to you to decide.