HTML and CSS Reference
In-Depth Information
clear: both;
Although this technique does as expected—the footer clears below the floating columns—an unexpected behavior
occurs, too: The main container doesn't appear to be aware of the size of the columns and is no longer wrapped
around them, as shown in Figure 8-5.
Figure 8-5
The browser window zoomed out to show the footer is now cleared, but the height of the main container isn't
right.
You might be tempted to specify the height of the main container to make it
appear
to contain the columns, but do-
ing so is a bad practice because you can't guarantee the main container or its contents will always be the same
height. This solution is a no-go.
You could add an empty HTML element below the two floated elements:
<div id=”main” class=”group”>
<div id=”content” role=”main”>
