Overflow box with width as length

Please resize the viewpoint until the overflow box is 400px in width. Each background square is 25px in width.

Overflow box 'width' 400px

1a. Float left
1b. Float right
2a.
2b. Float left

Gecko 1.8: Scrollable box 'width' 850px = (margin-left 25px + 'width' 800px + 'margin-right' 25px).

2c. Float right
3a.
3b. Float left

Gecko 1.8: Scrollable box 'width' 900px = ('margin-left' 25px + border-left-width 25px + 'width' 800px + 'border-right-width' 25px + 'margin-right' 25px).

Gecko 1.9, Safari 3 & Opera 9.5: Scrollable box 'width' 875px = ('margin-left' 25px + border-left-width 25px + 'width' 800px + 'border-right-width' 25px + 'margin-right' 25px~0px).

3c. Float right

Gecko 1.8 & Opera 9.5: Visible box 'width' 400px.

Gecko 1.9, Safari 3 & Opera 9.5: Scrollable box 'width' 875px = ('margin-left' 25px + border-left-width 25px + 'width' 800px + 'border-right-width' 25px + 'margin-right' 25px~0px).

Overflow box 'padding-left' 50px + 'width' 400px + 'padding-right' 50px = 500px

4a.

Gecko 1.8: Scrollable box 'width' 775px = 'padding-left' 50px + ('margin-left' 25px + border-left-width 25px + 'width' 600px + 'border-right-width' 25px + 'margin-right' 25px~0px) + padding-right' 50px.

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

4b. Float left

Gecko 1.8: Scrollable box 'width' 1000px = 'padding-left' 50px + ('margin-left' 25px + border-left-width 25px + 'width' (400px x 200%)800px + 'border-right-width' 25px + 'margin-right' 25px) + padding-right' 50px.

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

4c. Float right

Gecko 1.8~1.9: Visible box 'width' 500px.

Safari 3 (this is incorrect behavior): Scrollable box 'width' 675px = 'padding-left' 50px~0px + ('margin-left' 25px + border-left-width 25px + 'width' 600px + 'border-right-width' 25px + 'margin-right' 25px~0px) + padding-right' 50px~0px.

  1. Overflow box with width as auto with element floated
  2. Overflow box with width as length with element floated

CSS Class - test with CSS