HTML and CSS Reference
In-Depth Information
columns to the edge of the row. To balance this we'll place all of our columns
within a grid and add the same
padding
from our columns to that grid.
Let's use a class name of
grid
to identify our grid, and then let's identify the
same horizontal
padding
for our
grid
,
col-1-3
, and
col-2-3
classes. With
commas separating our selectors again, our CSS looks like this:
1.
.grid,
2.
.col-1-3,
3.
.col-2-3 {
4.
padding-left: 15px;
5.
padding-right: 15px;
6.
}
4.
When we're setting up the horizontal
padding
, we'll need to be careful. Remem-
ber, in the last lesson we created a container element, known by the class of
con-
tainer
, to center all of our content on a page within a
960
-pixel-wide element.
Currently if we were to put an element with the class of
grid
inside an element
with the class of
container
, their horizontal paddings would add to one another,
and our columns would not appear proportionate to the width of the rest of the
page.
We don't want this to happen, so instead, we'll have to share some of the styles
from the
container
rule set with the
grid
rule set. Specifically, we'll need to
share the
width
property and values (to make sure our page stays fixed at
960
pixels wide) and the
margin
property and values (to center any element with the
class of
grid
on the page).
We'll accomplish this by breaking up the old
container
rule set into the follow-
ing:
1.
.container,
2.
.grid {
3.
margin: 0 auto;
4.
width: 960px;
5.
}
6.
.container {
7.
padding-left: 30px;
8.
padding-right: 30px;
9.
}
Now any element with the class of
container
or
grid
will be
960
pixels wide
and centered on the page. Additionally, we've preserved the existing horizontal
Search WWH ::
Custom Search