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: