Cross-Browser Layout Techniques - Beginning CSS3 - page 269

Figure 12-8. An absolutely positioned sidebar overflows if it's longer than the main content

■ unlike the example in Figure 12-4 , the overspill lies on top of the footer because there's no interaction
between the absolutely positioned sidebar and the footer. when the sidebar is floated, you can use the clear property
to move the footer down. But clear doesn't have any effect with positioned elements.

Note

Using a Negative Margin for a Left Sidebar
Yet another way of moving the sidebar into position when it comes after the main content in the HTML markup
involves floating both columns to the left. You add a left margin to the main content to make room for the sidebar,
and then adjust their relative positions by applying a negative left margin to the sidebar. Strange though it may
seem, this has the effect of pulling the sidebar up alongside the main content and then leapfrogging over it into
the correct position on the left.
The negative left margin on the sidebar needs to be the same as the combined width of the sidebar and main
content. When working with percentage values, the calculation couldn't be simpler, it's 100% .
The styles for the sidebar and main content in left2col_negative.html look like this:

#sidebar {
width: 29%;
padding: 2%;
float: left;
margin-left: -100%;

}
#main {
width: 63%;
padding: 10px 2%;
margin-left: 33%;
float: left;

}

This produces exactly the same layout as in Figure 12-7 .