Fixing overflow:hidden in IE

There are known problems in IE with expanding fixed width or fixed height boxes (div). If we don’t respect the codding standards it happens to be problems. Suppose we have a parent div with no height settled. This div has two child divs that have the float attribute settled . We are used to know that the parent div will expand. IE won’t do this!

The trick would be to set overflow: hidden to the parent div to force the browser to hide any excessive content instead of expanding the container. This techniques it really works and saves us for many problems. Before I tell you more about the overflow attribute there is something more with divs which do not expand. The trick I told you earlier seems not to be  working in IE 6… It was recently found a solution for this. Just 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.

There are cases when a part or the entire child box may be outside the parent box:

• A line can not be broken, so the line box will be wider than the block box.
• A block-level box is too wide for the containing block.
• when a box is positioned absolutely.
• when the block has negative margins.

Lets see the properties for the overflow attribute:

Value:	visible | hidden | scroll | auto | inherit
Initial:	visible
Applies to:	block-level and replaced elements
Inherited:	no
Percentages:	N/A
Media:	visual

Now lets see the meanings of the values:

visible	This value indicates that content is not clipped;
hidden	This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region;
scroll	This value indicates that the content is clipped and that if the user agent uses scrolling mechanism this should be displayed.
auto	The behavior of the ‘auto’ value should cause a scrolling mechanism to be provided for overflowing boxes.

Below is an example:

<DIV>
<BLOCKQUOTE>
<P>This is an example to show how
overflow:hidden works!
</BLOCKQUOTE>
</DIV>

Here is the style sheet controlling the sizes and style of the generated boxes:

DIV {width : 100px;height: 100px;

border: thin solid red;

}

BLOCKQUOTE   {

width : 150px;

height : 150px;

margin-top: 50px;

margin-left: 50px;

border: thin solid blue;

}

The initial value of ‘overflow’ is ‘visible’, so the BLOCKQUOTE would be formatted without clipping, like in the image below:

Setting ‘overflow’ to ‘hidden’ for the DIV element, made the BLOCKQUOTE to be clipped by the containing block:

One Comment for “Fixing overflow:hidden in IE”

1. celik Says:
   September 23rd, 2008 at 8:23 am

   Thanks for a nice explanation. I do understand some more about ie6 not working with standards

Post a comment

Name (required)

Mail (will not be published) (required)

Website

Anti-spam text: (Required)*
To prove you're a person (not a spam script), type the security text shown in the picture. Click here to regenerate some new text.