# Widths and margins of floating, non-replaced elements

This is an excerpt from my test -David Baron.

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 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`.

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org