6The CSS box model

The rest of this is tidying up; the text in the blue box will run to the edge of the green box, so we need to add padding to the right hand side of the blue box. There also needs to be a margin at the top to move everything down from the edge of the browser.

.container {
    width: 960px;
    margin: 20px auto 0 auto;
    background-color: #D8D8D8;
}
.main-area {
    background-color: #96AFCF;
    width: 75%;
    float: left;
    padding-right: 30px;
}

I’ve assigned all four margins for the container class using the multiple assignment mentioned in § 6.3.1.

With everything lined up, we can remove the background colours, take out all the background-color: properties (there’s four of them, one for each box class).

    background-color: #xxxxxx;

Giving:

Figure 6.15   Final boxes without background colours

Let’s add a border to the top of the author area to show it spans the page:

.author-area {
    border-top: 1px solid #333;
    padding-top: 20px;
}

The border property is fairly self-explanatory; its first component is the thickness followed by style (solid, dashed &c.) and finally, the colour. It gives us this:

Figure 6.16   Final boxes with border