4

How floats relate to each other

Lets see how floating children organise themselves. Take a container 500px wide with seven left floated children - gifs say - lined up one after the other in the HTML. How best to imagine them taking their places in this musical chairs?

Imagine the children off stage, waiting to perform. The curtain goes up and the parent is there waiting. We have seen at length how undemonstrative parents can be: to the point of invisibility! But it will display its borders if it has any. Each float knows its order in the HTML. If you look at the code for Fig 1 below, you will see that orange is first, crimson is last. These floats are troops and very disciplined, they have very specific battle orders:

Fig 1. <div style="width: 500px; border: 4px solid #000;"> <img src="orange.gif"> <img src="red.gif"> <img src="blue.gif"> <img src="yellow.gif"> <img src="green.gif"> <img src="wine.gif"> <img src="crimson.gif"></div>.
See how the HTML camera has caught the process in slow motion. (Don't forget to allow animated gifs in your browser!).

Green is just after Yellow in the HTML order in the above. It cannot find space after the Yellow, so it drops down. But let us suppose that Blue - which is not its immediately older sibling (Yellow comes after Blue) is taller than in Fig 1. and is therefore poking down more. Green, finding no room on the line after Yellow, drops down to just below the bottom of Yellow and gingerly feels its way to the left. In Fig 1. above it was able to go all the way and this made it very happy, left floats love far left.

But in Fig 2. below, it encounters Blue poking down! This is a show stopper for Green! It has to stop right there and then and park.

Fig 2. <div style="width: 500px; border: 4px solid #000;"> <img src="orange.gif"> <img src="red.gif"> <img src="blue.gif"> <img src="yellow.gif"> <img src="green.gif"> <img src="wine.gif"> <img src="crimson.gif"></div>.

This is a case of snagging on a non immediately older sibling: Green snags on Blue although Yellow is after Blue, and Green after Yellow, in the HTML order. You might appreciate how in this changed situation, Wine and Crimson find themselves in different positions. Since Wine can no longer fit on the line next to Green, it goes just below Green's bottom to make a new line, trollying by its roof, as left as it can go. Crimson, unable to fit on the line after Wine, goes under and left.

Next we are going to look at how different children can mix together, the floaters and the regular boarders. This makes for some interesting and surprising things.

4