Floats with no width and percentage horizontal margins

Float horizontal margins 10%
Float horizontal margins 20%
Float horizontal margins 30%
Float horizontal margins 40%
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

In Firefox and Mozilla. When a float does not have a width then any horizontal margin (any side) that is a percent is calculated as part of the 100% that you are offsetting. The 100% in total is the width of the float caused by it contents combined with the horizontal margins of the float. A side affect is that if the text wraps in the float, this causes the float to have less width, so the margin itself becomes narrower. This can be seen if you resize the viewpoint or text.

In IE and Opera any horizontal margin (any side) that is a percent is calculated from the width of the container instead. To get Firefox and Mozilla to behave the same as IE and Opera there are these two solutions.

  1. Give a %, em or px width to the float.
  2. Give a em or px width for the horizontal margin of the float.