Floating children
We continue with a div, a potential container, very similar to the ones we started with. Let's have one with a width of 500px, a grey background and all else at default.
Fig 1. <div style="width:500px; background: #ccc;"><img style="float: left; width: 100px; height: 100px;"></div>
Now the container has a child, a coloured square. You can't see the container? Well, no, you can't. This is because the container has no height, no borders and no ordinary inline children as seen one page back. It simply cannot see a floated child. No matter how many floated children there are, still it cannot see them. The sense in which it is blind to floated children is very interesting and has many consequences.
Why containers are like this with floated children is another story. In a nutshell, the rules help authors to manipulate their web offerings better than any other set of rules that have so far been dreamed up and agreed on. A tall floated logo in a container, for example, might particularly be wanted to extend below the container itself.
Let us then accept the nature of the relationship with floats as one in which the container is normally oblivious to floated children and that special actions have to be taken to stop this, rather than special things needing to be done to ensure the jutting out.
Now, a good question is: In what sense is the floated child, a child of the div container? One simple answer is look at the source, look at where the tags are placed. The div opens up, <div>, and closes, </div>, around the <img> That seems pretty dry and clear cut. Elements within an element. But in terms of the story we are telling here, you can confirm this 'backroom' idea by seeing that the children themselves show they are aware of the parent - they are not blind to the parent. We will see this in great detail, starting with making the div appear indirectly by forcing a border on the parent of, say, 50px for each side with some different colours:
Fig 2. <div style="width:0; background: #ccc; border-top: 50px solid #c00; border-right: 50px solid #995; border-bottom: 50px solid #c92; border-left: 50px solid #995;"><img style="float: left;" src="red.gif" alt=""></div>
The child tries to put its top left corner at the top leftmost point within the parent. Since the parent has no width and no height, the leftmost point is the same as the rightmost point and both of these are the same as the top-most and bottom-most points. It is aware of its parent and does the best it can. That is, it sticks its top left corner into the dimensionless spot where its visually shy parent is.
Here is what happens when such a heightless and widthless parent gets more floated children:
Fig 3. <div style="width:0px; background: #ccc; border-top: 50px solid #c00; border-right: 50px solid #995; border-bottom: 50px solid #c92; border-left: 50px solid #995;"><img style="float: left; margin-left: 0em; width: 100px; height: 100px;" src="pics/red.gif" alt=""><img style="float: left; margin-left: 0em; width: 200px; height: 50px;" src="pics/green.gif" alt=""></div>
The second child, the green box, first tries get to its parents top left (as did the first child) but it is aware of its 'older' sibling and so tries to fit to the right of the first sibling. But it can't because there is no room. And there is no room because the parent has no width! So it drops just below its sibling and goes to the leftmost side of the parent just as its sibling did.
Let's now give the parent a width of 500px. And a practical border of just 4px all around - I say practical, because this is the sort of thing you will see now and then when you are trying to figure out a web page:
Fig 4. <div style="width: 500px; background: #ccc; border: 4px solid #000;"><img style="float: left; width: 104px; height: 133px;" src="pics/red.gif" alt=""><img style="float: left; width: 200px; height: 50px;" src="pics/green.gif" alt=""></div>
You can now see the presence of the 500px wide, heightless container via its thin black border. The first child rests on the left side of the parent. It is slightly to the right of the left edge of the black line because that black line is a border and includes a left border. Now that the parent has a width at least, the green second sibling has room to fit to the right of the red sibling. It aligns its top with that of its sibling and sidles up to it flush.
Without special margins or other trickery, the nature of floated children is to head for the leftmost position on the line until it reaches the right of any other floated child already before it. If it has no room to fit, it will drop to the next line. If it finds normal inline children 'before' it (in the HTML), it will displace them and the normals will go to its right if they can fit on the line. Whether they fit or not, the container will grow sufficient height to cover the non float.
A note on IE6. Some of you will either know or have looked at fig. 4 in IE 6 and noticed that the parent does grow height. IE6 does things differently! You might get the impression that a container in IE6 always sees its floated children and confers its height and background on them. But this is not always so. In the above fig. 4, IE6 does house the floats because a width to the parent is specified in the CSS. If you remove the width altogether (and thus rely on the default of 100% width), you will see IE6 behave like other good modern browsers, it fails to grow height.
There are some special remedies for those who want to make sure their IE6 float containers physically contain their floated children. We will come to these matters on page 7, 8, and 9. If you are particularly anxious to look at how to ensure IE6 covers its floated children, go to page 9 now.
Next we will look in more detail at the rules of queueing among floats. We will do this and later on come back to how a parent, given the right instructions, can cover its floated children with some height, some background and maybe surround them with a border. Also we look at what happens when ordinary children that go with the flow mix with floated children. There are some things about how height can grow to cover floated children that you can deduce along the way, there being no special instructions needed. See if you can spot these. But don't worry, I will review the ways later on in any case.