Floats: the shrink-to-fit algorithm and the 'auto' value

A float with no dimension and no margin declaration

A float

Note: Here is applied the "shrink-to-fit" algorithm. Internet Explorer 6 pushes the float higher than other browsers.

A float with a stated width and no margin declaration

A float

Note: In Internet Explorer 6 the element's positioning is the same as above.

A float with no dimension and 'margin: auto'

A float

Note: In Internet Explorer 6 the element's positioning is the same as above. I suppose that its default value for a float without any margin declaration is similar to the computed value used in this case (this computed value must be always 0).

A float with 'width: auto' and 'margin: auto'

A float

A float with a stated width and height, plus 'margin: auto'

A float

Note: In the case of width: auto, the resulting width is always related to the "shrink-to-fit" algorithm.

A float with a stated width and height, plus a 'margin-top' declaration

A float

Note: Since the element is floated along its left side, any declaration for the left margin would trigger the well-known doubled-margin bug in Internet Explorer 6 (and earlier).

Multiple floats with a stated width and 'margin: 0'

A float

A float

A float

A float

Note: When a float does not fit its line — because there is no more available room —, it must be shifted downwards. In such cases, another typical bug of Internet Explorer 6 (and earlier) might occur, especially when the container has no explicit dimension (see this article).

A float with only margins set

A float

Note: Here is applied the "shrink-to-fit" algorithm.

A dimensioned float with some anonymous content on its side

A float

Our subject being Poetry, I propose to speak not only of the art in general but also of its species and their respective capacities; of the structure of plot required for a good poem; of the number and nature of the constituent parts of a poem; and likewise of any other matters in the same line of inquiry. Let us follow the natural order and begin with the primary facts. Epic poetry and Tragedy, as also Comedy, Dithyrambic poetry, and most flute-playing and lyre-playing, are all, viewed as a whole, modes of imitation.

A dimensioned float with a negative margin

A float

Our subject being Poetry, I propose to speak not only of the art in general but also of its species and their respective capacities; of the structure of plot required for a good poem; of the number and nature of the constituent parts of a poem; and likewise of any other matters in the same line of inquiry. Let us follow the natural order and begin with the primary facts. Epic poetry and Tragedy, as also Comedy, Dithyrambic poetry, and most flute-playing and lyre-playing, are all, viewed as a whole, modes of imitation.

Note: In this case, the well-known problem with Internet Explorer 6 (and earlier) has been fixed by adding the declaration position: relative to the floated box. Now the float is entirely visible.

A dimensioned float with an element on its side

A float

Our subject being Poetry, I propose to speak not only of the art in general but also of its species and their respective capacities; of the structure of plot required for a good poem; of the number and nature of the constituent parts of a poem; and likewise of any other matters in the same line of inquiry. Let us follow the natural order and begin with the primary facts. Epic poetry and Tragedy, as also Comedy, Dithyrambic poetry, and most flute-playing and lyre-playing, are all, viewed as a whole, modes of imitation.

A dimensioned float with a non-dimensioned float inside

A float A float

Note: Here is applied the "shrink-to-fit" algorithm to the latter. The former establishes a new containing block (CB).

A dimensioned float with another dimensioned float inside

A float A float

A non-dimensioned float with more content inside

A float Our subject being Poetry, I propose to speak not only of the art in general but also of its species and their respective capacities; of the structure of plot required for a good poem; of the number and nature of the constituent parts of a poem; and likewise of any other matters in the same line of inquiry. Let us follow the natural order and begin with the primary facts. Epic poetry and Tragedy, as also Comedy, Dithyrambic poetry, and most flute-playing and lyre-playing, are all, viewed as a whole, modes of imitation.

Note: Here is applied the "shrink-to-fit" algorithm. Notice how the float adjusts its dimensions to make room for the content.