‘Five Minute Argument’ is the personal site of Bobby Jack, a London-based Web Developer.
How elements on the same horizontal behave
Opposing floats appear at either end of their containing block element:
In this example, 18em is the minimum width at which both floats still align horizontally (widths (7em * 2) + margins (1em * 4)). Note that horizontal margins, unlike vertical ones, do not collapse.
When the containing element has a width below this, the elements stack horizontally, whilst still obeying their respective float directions.
Whilst, at a width of 9em, the elements align vertically (and float direction is, effectively, irrelevant).
And, at a width of just 5em, with the default overflow value (visible), each element ‘escapes’ the container.
‘Five Minute Argument’ is the personal site of Bobby Jack, a London-based Web Developer.