Internet Explorer Margin Fix Examples (Un-fixed)

This version does not have the fix applied. The page still works, but it does not have automatic horizontal margins. Back to the examples with 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;
}