I've just had my life revolutionised by a deeper understanding of a particular part of the CSS spec. It looks like magic but it isn't.
Consider a two-column page layout, where the left column needs to be variable width (up to a maximum), wrapping its content, and the right column needs to fill the rest of the horizontal space.
<div class='right'>right stuff</div>
If you float the elements (one or both), you get both blocks being the minimum size they can be. Same if you inline-block.
It turns out that what one needs to do is have the .right div start a new Block Formatting Context (BFC).
A BFC will respect the edge of floats and will have its children block elements fill its full width.
A BFC will also adjust its height according to its children, even if its children "float" - so no more messing around with "clear".
My two elements would normally be in the same BFC, and so if I 'float: left' the .left element, the .right element will need to be given a width or it will take 100% of the document width and will "drop down" below .left.
By putting .right in its own BFC, it will naturally take up 100% of the remaining space next to the float:left .left element.
How can you activate this, you may ask? Simply put "overflow: hidden" on .right :
ALL credit for this goes to this stack overflow question/answer:
And to this article:
And, of course, to the CSS spec: