Sams Teach Yourself CSS in 10 Minutes Chapter 19. Positioning Two Columns with a Header and a Footer | 3

Sams Teach Yourself CSS in 10 Minutes
Chapter 19. Positioning Two Columns with a Header and a Footer

Styling the #content Container

The #content container needs to be set to float: left so that it sits beside the #nav container. You also will need to set a width, which in this case will be 475px.

To create a gutter between the two columns, use margin-left: 45px. Finally, padding needs to be applied to the top and bottom of the container. You will need to use padding: 15px 0 as shown in Listing 19.9. The results can be seen in Figure 19.8.

Styling the #footer Container

The #footer container is displayed after the #nav and #content containers. Because these two containers are floated, there is a possibility that the #footer container might try to sit beside them. This can be fixed using the clear property on the #footer container. The four options are clear: left, clear: right, clear: both, and clear: none.

Here you will use clear: both, which will force the #footer container to sit below the two floated containers. To set a background color, use background: #387A9B. The color can then be set to #fff.

Next, padding can be used to create some space around the content. You can apply 5px to the top and bottom, and 10px to the left and right edges using padding: 5px 10px as shown in Listing 19.10. To align the footer content to the right, use text-align: right.

Finally, the font size of the footer can be reduced because it is less important information. You can use font-size: 80% as shown in Listing 19.10. The results can be seen in Figure 19.9.

Styling the <h2> Element

The <h2> element is used for the main heading on the page. Its top margin needs to be removed so that the <h2> element lines up with the content in the #nav container. This is achieved using margin-top: 0.

Next, the color can be changed using color: #B23B00.

Standard headings generally are displayed in bold text. You can override this default behavior using font-weight: normal as shown in Listing 19.11. The results can be seen in Figure 19.10.

Created: March 27, 2003
Revised: January 03, 2005

URL: http://webreference.com/programming/css_10/1