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…


Comments from long ago:

Comment from: Zoffix Znet

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

2006-12-26 08-57

Comment from: dario

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

2007-08-16 16-03

Comment from: Isaac Grover

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

2007-09-10 05-16

Comment from: fe kaylius

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

2007-10-25 22-44

Comment from: Ben Dappen

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.

2008-03-14 16-23

Comment from: Simon

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; }

2008-04-09 11-09

Comment from: Romain

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.

2008-04-10 10-24

Comment from: Neil Pharazyn

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

2008-04-11 07-10

Comment from: Acronyms

Neil, You need to add “;” to height: 100%

2008-04-22 10-14

Comment from: Natasha

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.

2008-05-16 15-53

Comment from: Clotho

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,

2008-05-19 11-11

Comment from: Rajiv

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

2008-07-17 19-10

Comment from: Drewe

I managed to fix this by setting a postion property.

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

2009-03-02 05-10

Comment from: Leslie R

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!

2009-05-27 17-45

Comment from: Kelly

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.

2009-07-22 21-32

Comment from: Lisa

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!

2009-08-03 17-36

Comment from: driedoezoe

THANKS!!!

2009-08-06 16-41

Comment from: ced

great with position:relative !

2009-08-12 11-45

Comment from: Mahmoud Ameara

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

2009-08-13 11-24

Comment from: Kamal

thanks Leslie R! great fix with position:relative!

2009-09-21 15-41

Comment from: sathish

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

2009-09-26 14-13

Comment from: Merel Veracx

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

2009-09-26 20-17

Comment from: Tony

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; }

2009-10-05 14-27

Comment from: Donald

The postion:relative helped me with my issue.

2009-10-08 22-06

Comment from: Szilard David

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

2009-12-16 16-03

Comment from: Amit Sharma

Thanks !! Fixed by position:relative;

2010-01-18 06-13

Comment from: ken

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! :)

2010-02-22 15-12

Comment from: subduedjoy

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!

2010-03-11 21-14

Comment from: Wojtek

@Donald.

THANKS! The position relative worked great for me too!.

2010-03-16 18-29

Comment from: Rob Crowell

You, sir, have just ended about 2 hours of frustration on my end. Kudos!

2010-05-18 09-52

Comment from: masoud

THANKS alot! position:relative;

2010-05-27 14-42

Comment from: Dominik

Thanks mean! It’s work very well. Have a nice day!

2010-09-21 12-12

Comment from: Matt

Thanks very much! This is exactly what I was looking for … works without the hack in IE8, but IE7 was not behaving.

2010-11-22 02-13

Comment from: Fredde

Thanks! Saved my day! :D

2010-12-01 14-37

Comment from: وظائف شاغرة

you saved my day :) thanks

2011-01-09 15-51

Comment from: rollo

thanx so much! works fine!

2011-01-27 03-31

Comment from: Fpixl

Thanks for your tip! Adding height: 100%; worked for me

:)

2011-02-15 11-21

Comment from: Craig

This is a great IE6 fix. I was floating some spans inside an anchor and using overflow:hidden; fixed the bug perfectomondo.

Cheers

2011-03-01 16-04

Comment from: Digital Friend

Thank you, I have been trying to make a site IE6 compatible for the last few days and is proving a pain. your tips helped me lots! Thanks

2011-06-09 15-16

Comment from: Monique

position: relative;

it worked for me. thanks!

2011-06-18 09-56

Comment from: Ricky

thank you! you help me a lot, good job brother!

2011-08-01 12-21

Comment from: Sergey Sagan

position: relative; Also fixed the bug for me in Chrome, now it hides all of the elements! Thanks for the tip!

2011-10-15 13-09

Comment from: Robin

Position: relative; did the trick!

2011-10-24 18-31

Comment from: irina

adding :

position: relative;

to the element worked for me

2012-01-19 14-13

Comment from: karen keith

this helped me out a lot! Thank you so much :)

2012-02-26 06-01

Comment from: s-now

Thanks ! The width:100%; worked for me :-)

2012-03-30 11-32

Comment from: Abdul

Height:100%; fixed IE8 issue but now in Firefox it’s not showing scroll.

2012-08-06 22-49

Comment from: Siscolor

Thanks ! The width:100%; worked for me :-)

2012-09-26 18-31

Comment from: Jacques Lederer

Thanks a lot! I have been struggling with this. It didn’t seem to work for me, until I realized you must also apply “overfow:hidden” to the containing div. Not only “fixed” height. That solves the added unwanted scroll problem of IE. (For me at least)

2013-01-27 12-14

Comment from: yana

Thanks !

2013-03-21 09-25