Nesting float contexts and DIV background area

Brief blog article explaining the problem

The following examples have an outer DIV that contains three main DIVs, the first floated left, the second floated right and the last one unfloated.
The middle unfloated DIV contains exactly the same: an inside floated left DIV, an inside floated right DIV, and a final unfloated (green) DIV.
- After these DIVs, there another (yellow) DIV that does "clear:both".

The problem: which floats does CLEAR clear?

The "clear:both" clears all floats and so the yellow DIV fills the width of the screen. I want this float to only clear in the middle DIV.
The green background width of inner unfloated DIV goes right to the page edge.

FLOAT LEFT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FLOAT RIGHT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

UNFLOATED IN THE MIDDLE

INSIDE FLOAT LEFT

INSIDE FLOAT RIGHT

INSIDE UNFLOATED IN THE MIDDLE
(LIME)

CLEAR:BOTH, then
INSIDE UNFLOATED IN THE MIDDLE
(YELLOW)

Use 'overflow:hidden' to create a Block Formatting Context

The crucial trick to sorting these problems is to establish a new Block Formatting Context by adding style "overflow: hidden".

In the following example, "overflow: hidden" is added to the first middle unfloated DIV, with the red border. The new Block Formatting Context means that the subsequent "clear:both" clears only the inside floats, putting the yellow DIV in the desired place.
Establishing a Block Formatting Context for the green inside unfloated DIV with the blue border means that its background is set as desired.

FLOAT LEFT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FLOAT RIGHT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

UNFLOATED IN THE MIDDLE with overflow: hidden

INSIDE FLOAT LEFT

INSIDE FLOAT RIGHT

INSIDE UNFLOATED IN THE MIDDLE
with overflow: hidden
(LIME)

CLEAR:BOTH, then
INSIDE UNFLOATED IN THE MIDDLE
(YELLOW)

Getting the outer DIV border correct

There's a new problem with the above solution: the orange dotted border of the outermost DIV does not cover the large left and right floats. One solution to this is to have "clear:both" on the next element, but it is neater to add "overflow: hidden" to the main outermost DIV:

With overflow: hidden

FLOAT LEFT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FLOAT RIGHT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

UNFLOATED IN THE MIDDLE

INSIDE FLOAT LEFT

INSIDE FLOAT RIGHT

INSIDE UNFLOATED IN THE MIDDLE
(LIME)

CLEAR:BOTH, then
INSIDE UNFLOATED IN THE MIDDLE
(YELLOW)

Sources

Author

Copyright © 2010 Chris Cant, PHD Computer Consultants Ltd