Internet Explorer Margin Fix Examples

This page is centered with the script (and standards-mode is not enabled). Below are some more examples. To see what the script is actually doing, check out this page without the fix applied.

Example 1

Nested DIVs with individual margin-left and -right settings.

div, 80% wide, automatic margins.

nested div, 80% wide, automatic margins.

double-nested div, 80% wide, automatic margins.

double-nested div, no styles

#ex11, #ex12, #ex13 /* divs */
{
	width : 80%;
	margin-left : auto;
	margin-right : auto;
	padding : .3em;
	background : gray;
}

Example 2

A single paragraph element.

paragraph, 150px wide, automatic margins.

#ex21 /* paragraph */
{
	width : 150px;
	margin : 1em auto 2em;
	background : #ddd;
}

Example 3

A simple 3 by 2 table.

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

#ex3 /* table */
{
	margin : 0 auto 0 auto;
}

Example 4

An image element, which is inline by default. Notice how the auto margin has no effect on the image. Since images are inline elements, automatic margins do not apply to them directly. They only apply to block-level elements.

Inline image here. It should flow with the text, and wrap when appropriate.

#ex4 /* image */
{
	margin : auto;
}

Example 5

This image should be affected because the display is set to block.

Here is a block-level image. It takes up its own block of space, even though it is contained in the same paragraph.

#ex5 /* image */
{
	display : block;
	margin : auto;
}

Example 6

This is an example of "lopsided" margins.

I should be flush right.

I should be flush right with an extra 10px margin.

I should be flush right with 15% margin.

#ex61
{
	width : 15%;
	margin-left : auto;
	margin-right : 0;
	padding : 1em;
	background : gray;
}

#ex62
{
	width : 200px;
	margin-left : auto;
	margin-right : 10px;
	background : #fff;
}

#ex63
{
	width : 300px;
	margin-left : auto;
	margin-right : 15%;
	background : #fff;
}