Floating Elements for Layout - Beginning CSS3 - page 142

Figure 7-21. The heading and all following content has been pushed below the sidebar
The following style rule is causing the problem:
h2 {
clear: both;
}
This rule was added to the style sheet in “Preventing Elements from moving alongside a Floated Element”
earlier in this chapter (see Figure 7-6 ). However, the sidebar is floated to the left, so the first heading in the
main content is pushed all the way down the page. The fact that the heading is in a different section of the
page doesn't make any difference.
There are several ways to solve this problem. one is to change the value of the clear property to right , and
to float the problem image to the right. Alternatively, you could move the image, remove it altogether, or add
some extra text to prevent the heading from floating up alongside the image. in fact, i not only floated the
problem image to the right, but i also added some extra text. As a result, this rule is no longer needed.
6. Delete the following style rule:
h2 {
clear: both;
}