100% Width & Negative Margins: Renderbug Test Case

No Width Declared

The width of this .holder div is no explicitly declared, so it should automatically be the full width of the #container div (600px).

This paragraph should extend past the left edge of the .holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

This paragraph should extend past the right edge of the .holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

Styles Used

        .holder {
        background:#999;
        margin:1em 0;
        padding:0 0 1em;
        }

        .buttoutleft {
        background:#e6ca83;
        margin:1em 0 1em -60px;
        }

        .buttoutright {
        background:#88a696;
        margin:1em -60px 1em 0;
        }

Width 100%

The width of this .holder div is explicitly declared to be 100%, the full width of the #container div (600px).

This paragraph should extend past the left edge of the holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

This paragraph should extend past the right edge of the holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

Styles Used

        .holder {
        background:#999;
        margin:1em 0;
        padding:0 0 1em;
        }

        .buttoutleft {
        background:#e6ca83;
        margin:1em 0 1em -60px;
        }

        .buttoutright {
        background:#88a696;
        margin:1em -60px 1em 0;
        }

        #percentwidth {
        width:100%;
        }

Width 600px

The width of this .holder div is explicitly declared to be 600px, exactly the same as the #container div (600px).

This paragraph should extend past the left edge of the holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

This paragraph should extend past the right edge of the holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

Styles Used

        .holder {
        background:#999;
        margin:1em 0;
        padding:0 0 1em;
        }

        .buttoutleft {
        background:#e6ca83;
        margin:1em 0 1em -60px;
        }

        .buttoutright {
        background:#88a696;
        margin:1em -60px 1em 0;
        }

        #pixelwidth {
        width:600px;
        }

Width Auto

The width of this .holder div is explicitly declared to be auto. This should have exactly the same effect as no width declaration.

This paragraph should extend past the left edge of the holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

This paragraph should extend past the right edge of the holder div, and not be truncated, since we have not declared overflow:hidden anywhere.

Styles Used

        .holder {
        background:#999;
        margin:1em 0;
        padding:0 0 1em;
        }

        .buttoutleft {
        background:#e6ca83;
        margin:1em 0 1em -60px;
        }

        .buttoutright {
        background:#88a696;
        margin:1em -60px 1em 0;
        }

        #autowidth {
        width:auto;
        }