createErrorMsg - 1:32 am on Sep 10, 2004 (gmt 0)

I love it when Suzy waxes poetic about the cascade and specificity...

How about a shorthand explanation of 'how float works...?

Float Basics:
A floated item is placed in the flow according to it's spot in the source code, then is removed from the flow and moved in the direction of the float property value until it either (a) meets the edge of it's containing block or (b) hits the edge of another float. Property values include 'left,' 'right,' or 'none.'

Floating occurs at the source location of the element, meaning that floated elements in a container must, in the source code, come before non-floated elements in the same container. Floated elements that come after non-floated elements will be placed beneath such elements (as the flow dictates) and will then 'lift out' and float along that line box, rather than beside the non-floated element.

Any floated item must have an explicit width.

Multiple FLoats:
If multiple items are floated within the same container and in the same direction, they will line up, border to border, until there is no longer enough room to place the next float. The next float will then move down until there is enough room for it (i.e., when the previous float is cleared) and will then 'lift out' of the flow and move in the float direction as above. This allows for the creation of horizontal 'rows' of like-heighted elements, or MC Escher-like peices of modern art when dissimilarly-heighted elements are used.

Multiple items can be floated within the same container but in opposite directions, and will appear 'side by side' as long as you can be certain the container is wide enough to allow for both floats. Otherwise, the float that comes second in the source will be forced to move down until there is enough horizontal space in the container for it, at which point it 'lifts out' and floats in its appropriate direction. For this reason, two floated elements with opposite dire3ction property values should never be placed in a relatively (em or %) sized container.

Containing Floats:
Standards-compliant floating is intended to allow elements to 'leave' their container boxes in a downwardly-vertical direction, and overlap 'into' subsequent container boxes. If you wish to have a container that stretches down and 'wraps around' it's floated child elements, you must apply a float value to the container itself.

(Note: IE (and reportedly Opera) automatically does this. This is one reason why designing for Firefox then tweaking for IE is a good idea. A float layout that looks good in IE may well burst its seams in Firefox.)

Clearing Floats
Floats will continue to float over stuff, shuffling content out of the way, until either (a) the float runs out of content, or (b) it is cleared.

Clearing is done with the 'clear' property, and is applied to the element following a floated element that you do not wish to have the float float over.

Give the clear property a value of 'left', 'right' or 'both'. Use both only when there is, in fact, both a left and rigth float that needs to be cleared. Otherwise, use the direction of whatever the float that you are trying to escape has. Although 'both' will work in any case, it's a sign that you're not paying attention to the details of your layout and could, potentially, cause you to clear a float you didn't need or want cleared when used to clear only one float in one direction.

[edited by: createErrorMsg at 2:15 am (utc) on Sep. 10, 2004]