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:
Click here to view code image
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
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-
Click here to view code image
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