HTML and CSS Reference
In-Depth Information
.group:before, .group:after
First, pseudo-elements are placed before and after the .group element.
content: “”;
display: table;
The pseudo-elements are given an empty content declaration, which, as explained in Chapter 3, is required to get
pseudo-elements working.
These pseudo-elements are told to display as if they were tables. The display property is covered in the Chapter 9.
When you make them act as tables, margin-collapse is prevented, which is to say any margins on elements before
and after these elements are still respected.
.group:after {
clear: both;
}
The pseudo-element that is placed after the .group element is then cleared on both sides, which makes the main
container the correct height—so it actually contains the floating elements—and pushes the footer down below the
main container.
These rule sets alone create a clearing effect that fixes the issue seen in Figure 8-6. However, as is often the case, this
fix doesn't work in Internet Explorer versions 6 and 7 without one final tweak:
.group {
zoom: 1;
}
As explained with the filter property in Chapter 5, Microsoft used to be in the habit of adding unofficial proper-
ties to its browsers. zoom is another of those properties, but here you can use it to get Internet Explorer versions 6
and 7 to clear the floating elements correctly. By using zoom , you can work around a bug in these browsers that
make the clear fix work as expected.
Now this CSS is in place, whenever an element contains floating elements, you can give that containing element a
class of group to make the container clear them properly.
With the sidebar now floating to the right of the page and with a width of 25%, you can see that all those styles you
added to the newsletter box finally make sense. No longer is the newsletter box stretched right across the page with
lots of padding; instead, it's a nice-looking box that draws the users' eyes in an attempt to persuade them to sign up
for the newsletter.
You may have noticed the header also has a class of group; the reason is that the logo and navigation float side by
side, just like the content and sidebar.
1. In styles.css, find the #header .logo rule set and add the following:
float: left;
width: 240px;
2. Find the #header nav rule set and add the following declaration:
Search WWH ::




Custom Search