HTML and CSS Reference
In-Depth Information
16.
width: 63%;
17.
}
18.
aside {
19.
float: right;
20.
margin: 0 21.5%;
21.
width: 30%;
22.
}
Figure 5.6
A two-column page layout with contained floats
The technique shown here for containing elements is know as a “clearfix” and can often
be found in other websites with the class name of
clearfix
or
cf
. We've chosen to use
the class name of
group
, though, as it is representing a group of elements, and better ex-
presses the content.
As elements are floated, it is important to keep note of how they affect the flow of a page
and to make sure the flow of a page is reset by either clearing or containing the floats as ne-
cessary. Failing to keep track of floats can cause quite a few headaches, especially as pages
begin to have multiple rows of multiple columns.
In Practice
Let's return to the Styles Conference website to try floating some content.
1.
First things first, before we begin floating any elements, let's provide a way to con-
tain those floats by adding the clearfix to our CSS. Within the
main.css
file, just
below our grid styles, let's add the clearfix under the class name
group
, just like
before.
Search WWH ::
Custom Search