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='wrap'>
 <div class='left'>stuff</div>
 <div class='right'>right stuff</div>
</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 :

.left {
 max-width: 33%;
 float: left;
}

.right {
 overflow: hidden;
}

ALL credit for this goes to this stack overflow question/answer:

And to this article:

And, of course, to the CSS spec:



...Click for More
Article
Block Formatting Context
CSS
Fill available space
Float left
full width right column
Multi-column layout
Programming