HTML and CSS Reference
In-Depth Information
12.
}
There's quite a bit going on here, but essentially what the CSS is doing is clearing any
floated elements within the element with the class of
group
and returning the flow of the
document back to normal.
More specifically, the
:before
and
:after
pseudo-elements, as mentioned in the
Lesson 4
exercise, are dynamically generated elements above and below the element with
the class of
group
. Those elements do not include any content and are displayed as
table
-level elements, much like block-level elements. The dynamically generated ele-
ment after the element with the class of
group
is clearing the floats within the element
with the class of
group
, much like the
clear
from before. And lastly, the element with
the class of
group
itself also clears any floats that may appear above it, in case a left or
right float may exist. It also includes a little trickery to get older browsers to play nicely.
It is more code than the
clear: both;
declaration alone, but it can prove to be quite
useful.
Looking at our two-column page layout from before, we could wrap the
<section>
and
<aside>
elements with a parent element (see
Figure 5.6
). That parent element then needs
to contain the floats within itself. The code would look like this:
HTML
1.
<header>...</header>
2.
<div class="group">
3.
<section>...</section>
4.
<aside>...</aside>
5.
</div>
6.
<footer>...</footer>
CSS
1.
.group:before,
2.
.group:after {
3.
content: "";
4.
display: table;
5.
}
6.
.group:after {
7.
clear: both;
8.
}
9.
.group {
10.
clear: both;
11.
*zoom: 1;
12.
}
13.
section {
14.
float: left;
15.
margin: 0 1.5%;
Search WWH ::
Custom Search