Приглашаем посетить

Styling the Container

Now that the <body> element has been styled, all content will be centered on the page. This can be overcome by setting the container to text-align: left.

For browsers that support auto margins, the correct centering method is then applied: margin: 0 auto.

The container can be set to a width of 700px. This width can be changed to suit your needs.

Finally, the container must be set with a white background using background: #fff as shown in Listing 18.4. The results can be seen in Figure 18.2.

Listing 18.4. CSS Code for Styling the Container

body
{
    margin: 0;
    padding: 0;
    text-align: center;
    background: #B0BFC2;
    color: #444;
}

#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    background: #FFF;
}

Figure 18.2. Screenshot of styled container.

Table of Contents