When different types of children mix

Lets see how children organise themselves when they are of different types; when some are floated and some are not. Take the simplest case; just two siblings, one floated and the other inline:

Fig 1 <div><img class="floated" src="pics/floatPortrait.jpg" alt=""><img src="pics/crimson.png" alt=""></div>
The green is first child and floated, the crimson is second and inline.

Fig 2 <div class="containerSpecial"><img src="pics/crimson.png" alt=""><img class="floated" src="pics/floatPortrait.jpg" alt="" style="margin-bottom: .5em;"></div>
The crimson is first child and inline, the green is second child and floated left.

In many browsers, figs 1 and 2 will be identical. And many browsers will exhibit fig 1 the same. But in the case of fig 2 in some older browsers, the green second child, a left-float, does not take its position at the far left on the line it clearly has room to be on: it drops down and finds the leftmost spot there.

You can think of the situation as there being different cultures; in some, the floating property has a higher status than the age (html order). The web developer must keep up to speed with these different cultures. The figures on this page are all 'live' and will behave according to the cultures. Try it in different browsers. Do not be distracted by some Internet Explorer parent behaviours such as growing height to accommodate floated children. Here we are only concerned about the way the children organise themselves.

There is one particular little detail not so far covered: the inline children in the markup behind the figs above are aware of their floated siblings but are blind to their height. The road they are running along is just high enough to fit the tallest inline children on. The inline child respects the left floated one only in terms of the horizontal position. It sits as close to the floats right as it can if there is room on the line, its foot vertically aligned with the foot of the sibling.

If there is not enough room on the line for both, one of the siblings must drop to the next line. Let's see this by making the container not so wide.

Fig 3 As in fig 1. above but with container width reduced. The green is first child and floated, the crimson is second and inline.

Fig 4 As in fig 2. above but with container width reduced. The crimson is the first child and inline, the green is second and floated left.

In fig 3, the parent covers both children but this is only because it sees its inline child (which is below the float) and grows its height to enclose it. The crimson is aware of the floated sibling and hence drops below because there is no room to the right of it. In Fig. 4, the green is second child and there is not enough room for it and so it drops. The parent, seeing only the inline child, covers it but no more than it needs. The float hangs out.

If you are keen to look into this ordering among the children a bit more and see the way different browsers behave when even more children are involved, you are welcome to see some extra details on this.