Overflow box with width as length

Please resize the viewpoint until the overflow box is 400px in width, which is the size of this block. Each background square is 25px in width.

Normal box 'width' auto

1a.
containing block
1b. Margin
containing block
1c.
containing block
1d. Margin
containing block

Containing block = 200px.

Descendant block = ('margin-left' 50px + 'width' 100px + 'margin-right' 50px)200px.

Overflow (auto) box 'width' auto

2a.
containing block
2b. Margin
containing block
2c.
containing block
2d. Margin
containing block

Containing block = 200px.

Descendant block = ('margin-left' 50px + 'width' 100px + 'margin-right' 50px)200px.

Gecko 1.8: Containing block = 300px.

Gecko 1.8: Descendant block = ('margin-left' 75px + 'width' 150px + 'margin-right' 75px)300px.

Opera 9.5: Each overflow box with padding has extra space added on the right.

Normal box 'width' auto

3a.
containing block
3b. Margin
containing block
3c.
containing block
3d. Margin
containing block

Containing block = 200px.

Descendant block (margin box) = ('margin-left' 50px + 'width' 300px + 'margin-right' 50px~0px)350px.

Overflow (auto) box 'width' auto

4a.
containing block
4b. Margin
containing block
4c.
containing block
4d. Margin
containing block

Containing block = 200px.

Descendant block = ('margin-left' 50px + 'width' 300px + 'margin-right' 50px)400px.

Gecko 1.8: Containing block = 300px.

Gecko 1.8: Descendant block = ('margin-left' 75px + 'width' 450px + 'margin-right' 75px~0px)525px.

Opera 9.5: Each overflow box with padding has extra space added on the right.

Gecko 1.9 & Safari 3: Scrollable box 'width' 450px = 'padding-left' 100px + ('margin-left' 50px + 'width' 300px + 'margin-right' 50px~0px) + 'padding-right' 100px~0px.

IE7: Scrollable box 'width' 600px = 'padding-left' 100px + ('margin-left' 50px + 'width' 300px + 'margin-right' 50px) + 'padding-right' 100px.

Overflow (auto) box 'width' auto

5a.
containing block
5b. Margin
containing block
5c.
containing block
5d. Margin
containing block

Containing block = 200px.

Descendant block = ('margin-left' 50px + 'border-left' 25px + 'width' 300px + 'border-right' 25px + 'margin-right' 50px)450px.

Gecko 1.8: Containing block = 300px.

Gecko 1.8: Descendant block = ('margin-left' 75px + 'width' 450px + 'margin-right' 75px~0px)525px.

Opera 9.5: Each overflow box with padding has extra space added on the right.

Gecko 1.9 & Safari 3: Scrollable box 'width' 500px = 'padding-left' 100px + ('margin-left' 50px + 'border-left' 25px + 'width' 300px + 'border-right' 25px + 'margin-right' 50px~0px) + 'padding-right' 100px~0px.

IE7: Scrollable box 'width' 650px = 'padding-left' 100px + ('margin-left' 50px + 'border-left' 25px + 'width' 300px + 'border-right' 25px + 'margin-right' 50px) + 'padding-right' 100px.

Overflow-x (scroll) box 'width' auto

This is for the luxary of IE7 which doesn't quite cope with overflow:auto.

6a.
containing block
6b. Margin
containing block
6c.
containing block
6d. Margin
containing block

Containing block = 200px.

IE 7: Descendant block = ('margin-left' 50px + 'width' 300px + 'margin-right' 50px)400px.

IE 7: Scrollable box ('padding-left' 100px + ('margin-left' 50px + 'width' 300px + 'margin-right' 50px)400px + 'padding-right' 100px) = 600px.

CSS Class test - Visual Effects