Re: margins on floated elements

Hello David,

 > I tried to illustrate how margins on floated elements can give much
 > control over the formatting of such elements at
 > <http://www.socnet.com/users/hpaa/margins.html>. Unfortunately, section
 > 4.2 of the CSS1 spec of 11-Sept-96 implies my examples are incorrect.
 > Elsewhere in the spec, margins determine the spacing between elements.
 > For example, section 5.1.1 states that "the margins express the minimal
 > distance between the borders of two adjacent elements" and "when margin
 > properties are applied to replaced elements (e.g. IMG), they express
 > the minimal distance from the replaced element to any of the content of
 > the parent element." This is logical. But section 4.2 states that the
 > seven properties that influence the horizontal dimension of an element
 > must add up to the width of the parent element. If the effective width
 > of a _floated_ element must equal the entire width of the parent, it
 > should then not be possible to wrap text around the element at all!
 > To subject floated elements to the constraints on block element margins
 > described in 4.2 is illogical and contradictory, and unnecessarily
 > limits the usefulness of float. Would it not make more sense to assume
 > margins of 0 for the floated element unless otherwise specified, and
 > specify that the parent's content wrap around the element in accordance
 > with the definition of margins in section 5.1.1?

You're right, but we were quicker!

We changed it in the new spec (not yet available outside W3C). It now
works like you describe.

(At least I think so, because I couldn't open your URL.)

This is the new text we propose:

  4.1.2    Horizontal formatting

  The horizontal position and size of a non-floating, block-level
  element is determined by seven properties: 'margin-left',
  'border-left', 'padding-left', 'width', 'padding-right',
  'border-right' and 'margin-right'. The sum of these seven is always
  equal to the 'width' of the parent element.

  By default, the 'width' of an element is 'auto'. If the element is not
  a replaced element, this means that the 'width' is calculated by the
  UA so that the sum of the seven properties mentioned above is equal to
  the parent width. If the element is a replaced element, a value of
  'auto' for 'width' is automatically replaced by the element's
  intrinsic width.

  Three of the seven properties can be set to 'auto': 'margin-left',
  'width' and 'margin-right'. For replaced elements, a value of 'auto'
  on 'width' is replaced by the intrinsic width, so for them there can
  only be two 'auto' values.

  The 'width' has a non-negative UA-defined minimum value (which may
  vary from element to element and even depend on other properties). If
  '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 value will be replaced with the minimum value instead.

  If exactly one of 'margin-left', 'width' or 'margin-right' is 'auto',
  the UA will assign that property a value that will make the sum of the
  seven equal to the parent's width.

  If none of the properties are 'auto', the value of 'margin-right' will
  be ignored and 'margin-right' will be treated as if it were 'auto'.

  If more than one of the three is 'auto', and one of them is 'width',
  than the others ('margin-left' and/or 'margin-right') will be set to
  zero and 'width' will get the value needed to make the sum of the
  seven equal to the parent's width.

  Otherwise, if both 'margin-left' and 'margin-right' are 'auto', they
  will be set to equal values. This will center the element inside its

  If 'auto' is set as the value for one of the seven properties in an
  element that is inline or floating, it will be treated as if it were
  set to zero.

  Unlike vertical margins, horizontal margins are not collapsed.

and further down:

  4.1.4    Floating elements

  Using the 'float' property, an element can be declared to be outside
  the normal flow of elements and is then formatted as a block-level
  element. For example, by setting the 'float' property of an image to
  'left', the image is moved to the left until the margin, padding or
  border of another block-level element is reached. The normal flow will
  wrap around on the right side. The margins, borders and padding of the
  element itself will be honored, and the margins never collapse with
  the margins of adjacent elements.

    <STYLE TYPE="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }

      <IMG SRC=img.gif>
      <P>Some sample text to has no other..

  The above example could be formatted as: 

    |          max(BODY margin, P margin)
    |          ______________________________
    |    |    |             Some sample text
    | B  | P  | IMG margins that has no other
    | O  |    |    _____    purpose than to 
    | D  | m  |   |     |   show how floating
    | Y  | a  |   | IMG |   elements are moved
    |    | r  |   |     |   to the side of the
    | m  | g  |   |_____|   parent element
    | a  | i  |             while honoring
    | r  | n  |             margins, borders
    | g  |    |             and padding. Note
    | i  |    |how adjacent vertical margins  
    | n  |    |are collapsed between non-
    |    |    |floating 'block elements.

  There are two situations when floating elements can overlap with the
  margin, border and padding areas of other element:

    *   when the floating element has a negative margin: negative
	margins on floating elements are honored as on other block-level
    *   when the floating element is wider or higher than the element it
	is inside

Does it correspond to what you wanted?

  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/pub/WWW/People/Bos/                      INRIA/W3C
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 93 65 77 71                 06902 Sophia Antipolis Cedex, France