6

# 6The CSS box model

## Improving the appearance of the site

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.

style.css
.container {
width: 960px;
margin: 20px auto 0 auto;
background-color: #D8D8D8;
}
.main-area {
background-color: #96AFCF;
width: 75%;
float: left;
}
 Code 6.13   style.css (tidy up — margins & padding) a

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:

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

style.css
.author-area {
border-top: 1px solid #333;