CSS: Fixing overflow: hidden in IE

« Looking for a new hosting company?

My favorite Firefox extensions »

CSS: Fixing overflow: hidden in IE

08/14/06

CSS: Fixing overflow: hidden in IE

04:32:19 pm, by Francois Planque

, Categories: XHTML/CSS

Internet Explorer 6 for windows has been giving me a hard time with expanding fixed width or fixed height boxes (divs) in the most non standard fashion...

The trick would be to apply overflow: hidden to the div to force the browser to hide any excessive content (text, images) instead of expanding the container. But IE6 will not always do as told...

I found out today that the trick with IE, is to apply a fixed width or height property to the same container (div) as the overflow property, and then, IE will always crop the contents as expected.

Note: you can specify widths and heights in ex, em or % (not just px). So it's only "fixed" in a relative manner.

PS: In some cases, you may want to consider the non standard IE CSS property word-wrap: break-word; This will break words too long to fit into the fixed width. IE only and non standard...

Tags: css, msie, tip

44 comments

Comment from: Zoffix Znet [Visitor]

The issue is caused by hasLayout, read my article on http://zoffix.com/css/ie/haslayout.shtml

12/26/06 @ 08:57

Comment from: dario [Visitor]

Try to set only height (or width): 100%;
It worked with me.

08/16/07 @ 16:03

Comment from: Isaac Grover [Visitor]

Thanks to dario for the width: 100% tip. Worked like a charm for me too.

09/10/07 @ 05:16

Comment from: fe kaylius [Visitor]

you rock, i like the hacks, so i used the word-wrap method, perfecto!

10/25/07 @ 22:44

Comment from: Ben Dappen [Visitor]

Setting overflow:hidden and height:100% fixed the problem beautifully. One would think that without a set height, the parent would automatically fit the content instead of presuming height:0... I'll be glad when IE6 usage is low enough that I can start ignoring it.

03/14/08 @ 16:23

Comment from: Simon [Visitor]

This doesn't seem to work for me, tried the height and width at 100% and its still not playing, if you click on any of the top categories in ie6 you see what I mean. Or maybe I'm doing something wrong.

#blockdiv {
clear:none;
display:table;
overflow:hidden;
height:188px;
width: 147px;
}

04/09/08 @ 11:09

Comment from: Romain [Visitor]

Thank you for this nice tip ;-)

For me, I had to put a div with height and width to 100% in the first div for this to work.

04/10/08 @ 10:24

Comment from: Neil Pharazyn [Visitor]

I ran the following using IE6. The code version I run contains a couple of pages of content. It displays and prints the lot despite your suggested height: 100% and overflow:hidden;

I only want to see\print half a page of content. What do I add\change to achieve that?

#wrapper {
height: 100% /* again, fill in value needed */
overflow:hidden;
border: 3px solid; /* this is just for debugging, to see if the
browser actually does something sane */
}

....a couple of pages of content

04/11/08 @ 07:10

Comment from: Acronyms [Visitor]

Neil, You need to add ";" to height: 100%

04/22/08 @ 10:14

Comment from: Natasha [Visitor]

nice
I have found two interesting sources http://fileshunt.com and http://filesfinds.com and would like to give the benefit of my experience to you.

05/16/08 @ 15:53

Comment from: Clotho [Visitor]

The fixed height solution works for me, but fixing width does not help. Other solution does not help too.

Finally I create a new div with the fixed height and width to enclose the element,

05/19/08 @ 11:11

Comment from: Rajiv [Visitor]

Overflow solutions behaves differently in the sub-version of the IE6. There may not be a generic solution to this.

07/17/08 @ 19:10

Comment from: Drewe [Visitor]

I managed to fix this by setting a postion property.

So if you don't want things to change simply use position:relative;

03/02/09 @ 05:10

Comment from: Leslie R [Visitor]

I've been struggling with only showing part of a large image in an A tag. IE would show the entire image, setting overflow did nothing even though my width was set. Overflow did work when set on the parent LI, but this would then hide my flyout menus.

I added the fix mentioned above - position: relative; and now the A tag behaves in IE.

Thank you for that solution!

05/27/09 @ 17:45

Comment from: Kelly [Visitor]

Thank you so much for posting the solution to this IE6 bug. I'm working on a deadline and your solution fixed the problem and got me back on track quickly.

07/22/09 @ 21:32

Comment from: Lisa [Visitor]

Thank you Drewe! I had the height and width already set, but it was the position relative that I was missing! I was getting frustrated, thank you!

08/03/09 @ 17:36

Comment from: driedoezoe [Visitor]

THANKS!!!

08/06/09 @ 16:41

Comment from: ced [Visitor]

great with position:relative !

08/12/09 @ 11:45

Comment from: Mahmoud Ameara [Visitor]

I do the height 100% and overflow but it expand the height of the page show the scroll :(

08/13/09 @ 11:24

Comment from: Kamal [Visitor]

thanks Leslie R! great fix with position:relative!

09/21/09 @ 15:41

Comment from: sathish [Visitor]

Thanks dario, height:100% has fixed my problem,
height: auto is differs from other browsers and IE6.
Good solution Thanks,

09/26/09 @ 14:13

Comment from: Merel Veracx [Visitor]

Yes, adding position: relative to the surrounding box with the overflow: hidden did the trick - now my images are cropped in IE7. Thanks!

09/26/09 @ 20:17

Comment from: Tony [Visitor]

This worked for me also when I applied the line

overflow:hidden;

In the following code

background-color:#fafafa;
margin:1em 10%;
min-width:60em;
position:absolute;
width:80%;
overflow:hidden;
}

10/05/09 @ 14:27

Comment from: Donald [Visitor]

The postion:relative helped me with my issue.

10/08/09 @ 22:06

Comment from: Szilard David [Visitor]

Thanks!! Applying a fixed width to the same container as the overflow property worked for me

12/16/09 @ 16:03

Comment from: Amit Sharma [Visitor]

Thanks !!
Fixed by position:relative;

01/18/10 @ 06:13

Comment from: ken [Visitor]

the only thing fixing my problem was working with position:relative;

it's a kind of non sense applying height:100% for an element with a fixed height, so it doesn't work for me.

the fixed height and width, without relative positioning didn't work either. Thanks anyway! :)

02/22/10 @ 15:12

Comment from: subduedjoy [Visitor]

You'd think MS would have this solved by IE 8. Nope. Setting height did not work for me. Setting width to 100% did. Thanks!