Widths and margins of floating, non-replaced elements

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.