Layout Techniques - Jump Start CSS - page 40

elements causes those elements to drop below the floated element, just as they would if there
were no floats present.
To cause the new styles to apply to our layout, let's add a new class to our .main element:
<div class="main cf">
Notice the space separating the two classes. This is one of the features briefly mentioned in
Chapter 1 that makes classes a far superior selector in comparison to other options: the fact
that you can use multiple classes on a single HTML element.
With those styles inplace, the green background andredoutline will appear asexpected, con-
firming that our floated elements are now “clear.” We can then remove the background and
outline we added.
Another benefit of clearing the floats is that our footer content is now appearing below the
.main content, where it should be (albeit still unstyled) instead of bumping up against the
right side of the left column as it was prior to adding the clearfix. It's worth noting that we
could have caused the footer to drop below the .main element's content simply by adding
“ clear: both ” to the footer element itself. However, this would not have fixed the float
clearing problem where the .main element was collapsing.
Positioning in CSS
Another useful layout technique involves the use of CSS's position property. Although it's
possible to use this technique for layouts, in most cases you wouldn't use it for large structur-
al elements the way you would with floats. Positioning, however, can come in handy to help
place or align a specific element in a very precise manner.
A good candidate for this technique is the bottom half of our sidebar, the section called
“Yummy Tweets,” shown in Figure 2.6 .