Widths and margins of floating, non-replaced elements

A number of the tests in this page give incorrect descriptions because of the following statement in the definition of min-width (which should really say that it can also depend on the inline level content of the element):

The user agent may define a non-negative minimum value for the 'min-width' property, which may vary from element to element and even depend on other properties. If 'min-width' goes below this limit, either because it was set explicitly, or because it was 'auto' and the rules below would make it too small, the user agent may use the minimum value as the computed value.

This should be floating left and have a thin solid green border with width zero. However, the overflow should be visible (and red).

This is text in the containing div. It should span the whole width of the div because the float has zero width, and therefore this text should touch both purple borders (except for the width of the two green borders which should be touching each other).

This should be floating right and have a thin solid green border with width zero. However, the overflow should be visible (and red).

This is text in the containing div. It should span the whole width of the div because the float has zero width, and therefore this text should touch both purple borders (except for the width of the two green borders which should be touching each other).

[Squirrel Image]

The image to the left should be in a green-bordered div of width (and possibly height) zero. However, it should overflow and be visible. This text should touch both purple borders of the div (except for the width of the two green borders which should be touching each other).

[Squirrel Image]

The image to the right should be in a green-bordered div of width (and possibly height) zero. However, it should overflow and be visible. This text should touch both purple borders of the div (except for the width of the two green borders which should be touching each other).

This should be floating left and have a thin solid green border with width zero. However, the overflow should be visible (and red), and 200px wide.

This is text in the containing div. It should span the whole width of the div because the float has zero width, and therefore this text should touch both purple borders (except for the width of the two green borders which should be touching each other).

This should be floating right and have a thin solid green border with width zero. However, the overflow should be visible (and red).

This is text in the containing div. It should span the whole width of the div because the float has zero width, and therefore this text should touch both purple borders (except for the width of the two green borders which should be touching each other).

This should be floating left and be 200px wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and be 200px wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and be 30% wide. Its border should touch its container's border.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should not be displaced.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should not be displaced.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should not be displaced.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should not be displaced.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should be displaced 80px to the right.

This is text in the containing div. It should span the width of the div including 80px of the float. Therefore its left edge should be 80px inside the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should be displaced 80px to the right.

This is text in the containing div. It should span the width of the div up to 80px away from the edge of the float. Therefore its right edge should be 80px away from the edge of the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should be displaced 20px to the right.

This is text in the containing div. It should span the width of the div including 20px of the float. Therefore its left edge should be 20px inside the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should be displaced 20px to the right.

This is text in the containing div. It should span the width of the div up to 20px away from the edge of the float. Therefore its right edge should be 20px away from the edge of the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the right.

This is text in the containing div. It should span the width of the div including one third of the float (minus the border width). Therefore its left edge should be one third of the way inside the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the right.

This is text in the containing div. It should span the width of the div up to 10% of the width of the containing div from the edge of the float. Therefore its right edge should be 10% of the width of the containing div away from the edge of the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the left.

This is text in the containing div. It should span the width of the div up to 10% of the width of the containing div from the edge of the float. Therefore its left edge should be 10% of the width of the containing div away from the edge of the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the left.

This is text in the containing div. It should span the width of the div including one third of the float (minus the border width). Therefore its right edge should be one third of the way inside the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the left.

This is text in the containing div. It should span the width of the div up to 10% of the width of the containing div from the edge of the float. Therefore its left edge should be 10% of the width of the containing div away from the edge of the float and its right edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the left.

This is text in the containing div. It should span the width of the div including one third of the float (minus the border width). Therefore its right edge should be one third of the way inside the float and its left edge should touch the border of the containing div.

This should be floating left and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the right.

This is text in the containing div. It should span the width of the div including one third of the float (minus the border width). Therefore its right edge should be one third of the way inside the float and its left edge should touch the border of the containing div.

This should be floating right and should be 30% of the width of its parent. It should be displaced 10% of the width of its parent to the right.

This is text in the containing div. It should span the width of the div up to 10% of the width of the containing div from the edge of the float. Therefore its left edge should be 10% of the width of the containing div away from the edge of the float and its right edge should touch the border of the containing div.

This should be floating left and have a width 30% the width of its parent, a left margin 10% the width of its parent, and a right margin of 0. It should therefore be separated from the containing div by 10% on its left side.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and have a width 30% the width of its parent, a left margin 10% the width of its parent, and a right margin of 0.

This is text in the containing div. It should span the width of the div up to the 10% of the width of the containing div away from the edge of the float. Therefore its right edge should be 10% of the width of the containing div away from the float and its left edge should touch the border of the containing div.

This should be floating left and have a width 30% the width of its parent, a left margin 10% the width of its parent, and a right margin of 0. It should therefore be separated from the containing div by 10% on its left side.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its left edge should touch the float and its right edge should touch the border of the containing div.

This should be floating right and have a width 30% the width of its parent, a left margin 10% the width of its parent, and a right margin of 0.

This is text in the containing div. It should span the width of the div up to the 10% of the width of the containing div away from the edge of the float. Therefore its right edge should be 10% of the width of the containing div away from the float and its left edge should touch the border of the containing div.

This should be floating left and have a width 30% the width of its parent, a right margin 10% the width of its parent, and a left margin of 0.

This is text in the containing div. It should span the width of the div up to the 10% of the width of the containing div away from the edge of the float. Therefore its left edge should be 10% of the width of the containing div away from the float and its right edge should touch the border of the containing div.

This should be floating right and have a width 30% the width of its parent, a right margin 10% the width of its parent, and a left margin of 0. It should therefore be separated from the containing div by 10% on its right side.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and have a width 30% the width of its parent, a right margin 10% the width of its parent, and a left margin of 0.

This is text in the containing div. It should span the width of the div up to the 10% of the width of the containing div away from the edge of the float. Therefore its left edge should be 10% of the width of the containing div away from the float and its right edge should touch the border of the containing div.

This should be floating right and have a width 30% the width of its parent, a right margin 10% the width of its parent, and a left margin of 0. It should therefore be separated from the containing div by 10% on its right side.

This is text in the containing div. It should span the width of the div up to the edge of the float. Therefore its right edge should touch the float and its left edge should touch the border of the containing div.

This should be floating left and have a width 30% the width of its parent, a left margin 20% the width of its parent, and a right margin 10% the width of its parent. It should therefore be separated from the containing div by 20% on its left side.

This is text in the containing div. It should span the width of the div up to the 20% of the width of the containing div away from the edge of the float. Therefore its left edge should be 20% of the width of the containing div away from the float and its right edge should touch the border of the containing div.

This should be floating right and have a width 30% the width of its parent, a left margin 20% the width of its parent, and a right margin 10% the width of its parent. It should therefore be separated from the containing div by 10% on its right side.

This is text in the containing div. It should span the width of the div up to the 10% of the width of the containing div away from the edge of the float. Therefore its right edge should be 10% of the width of the containing div away from the float and its left edge should touch the border of the containing div.

This should be floating left and have a width 60% the width of its parent, a left margin 60% the width of its parent, and a right margin 60% the width of its parent. It should therefore be separated from the containing div by 60% on its left side and should stick out of the containing div on its right side.

This is text in the containing div. It should be below the float and both of its edges should touch the edges of the containing div.

This should be floating right and have a width 60% the width of its parent, a left margin 60% the width of its parent, and a right margin 60% the width of its parent. It should therefore be separated from the containing div by 60% on its right side and should stick out of the containing div on its left side.

This is text in the containing div. It should be below the float and both of its edges should touch the edges of the containing div.

Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org