How to fix IE 6 and overflow: hidden

PostApr 26th, 2007 | Comments (1)
I figured out this morning that IE 6 apparently has issues with "overflow: hidden." IE 6 completes ignores the overflow setting unless the surrounding element has a fixed width.

Here is an example of how it looked in IE 6 to being with.

I've drawn a red dotted line to indicate where the right boundary of the surrounding div is supposed to be.



As you can see, the long titles are pushing against the right side of the parent div and causing it to expand instead of getting cut off.

Giving the parent div a setting of "width: 100%" causes the text to be hidden correctly, but the long titles are still pushing the right side out:



However, if you give the parent div a fixed width setting "width: 300px," IE 6 behaves correctly:



As you can see, the inner div isn't pushing the right side of the parent div anymore.

Comments

maritnJul 28, 2008
Thanks, you are a life saver. I didnt realise the problem was so simple.

Post a comment

Name
URL
Email
Comment