Although floats might have been originally intended to allow authors to flow text around pictures and such, they are extensively used for laying out columns, the aim often being to make them as in in tables, equally high and capable of having different backgrounds that do not overlap or bleed. Lets look at an elementary mark-up.
Consider a parent with just one floated child, a sort of basic nuclear family. In HTML land, all families are single parents; so the analogy is more to do with the small number of basic parts within the parent, namely one float that forms one column and whatever it takes to form the other. In fact, nothing more substantial is actually needed, that is how nuclear and basic it gets:
This column is floated right and has a green background. Crucially for our purposes here, its content is taller than that of the non-floated area to the left. The parent is a Block Formatting Context and extends its height right down to cover it.
Fig 1.
<div class="nuclear" style="width: 401px; background: #ffc;">
<p style="float:right; width: 200px; border-left: 1px solid #000; background: #cfc; margin: 0; padding: .3em;">
This column is floated right and has a green background. ... </p>
</div>
Here is some content for the yellow column:
Fig 2.
<div class="nuclear" style="width: 401px; background: #ffc; padding-left: 10px;">
<div style="float:right; width: 200px; border-left: 1px solid #000; background: #cfc;">
This column is floated right and has a green background. ...
</div>
You are seeing the yellow background of the parent here. ... more loose text in parent ...</div>
This technique can be adapted to em based widths to get some real flexibility into it. See how the following differs when you change the text size view in your browser:
This column has a green background and is the longest of the two.
If the parent were to have a different coloured background to the paragraph on the left, it would appear where the short paragraph ended, ruining the appearance of the left column. The non-floated child, the paragraph, in this case, extends only so far as what it has to say. Not much! But, since the parent, in fact, has the same yellow background, the column appears as tall as this green one.
In this example, only to show it can be done, the text is in a paragraph element. Great because it can be better styled! The only real thing to emphasise here is that the colour of the paragraph must either be transparent or the same as the parent's.
Fig 3. This one allows the columns to grow wider with text size changes:
<div style="overflow: hidden; width: 30em; background: #ffc;">
<div style="float:right; width: 15em; border-left: .1em solid #000; background: #cfc;">
<p>This column has a green background and is the longest of the two.</p>
<p>If the parent were to have a different coloured background to ....</p></div>
<p>In this example, only to show it can be done, the text is in a paragraph element. ...</p></div>
It should not be lost on anyone who has studied the above examples that one needs to know beforehand which is the longest column. In case it is not completely clear, see what happens when we take an example from above and simply add more content to the formerly less furnished column:
Fig 4. Essentially same as Fig 2 but with much more to say in the yellow.
The general technique, with the limitation noted, can be leveraged to make more than two columns by putting a 2-column nuclear family into another parent. However, it is more unlikely that an author will know in advance which of a many columned layout is going to be the longest. So I have reserved some appendix space to the idea of generating more columns this way for those interested.
Where just two columns are involved, it is often well known that the content of a particular one will be longer than the other. And in some cases it could be known for 3 columns (a simple navigation left, lots of content middle, and a column for the odd announcement or small feature for the right). But this is not as flexible as an author might like for a general technique.
The other limitation is that the author is needing to set the width in advance. This might suit some designs, especially where there is a saving grace of em sizing as in the third of the examples above. But it is quite a restriction when more than two columns are concerned. Authors often want more flexibility for a middling content column. We will explore some techniques that use floats to achieve this.