4.3: Creating CSS specifications to control space

The CSS box model

The css box model

The CSS box model describes how to calculate space for div styles. First we’ll define the CSS properties that go into the box model:

When you use CSS to specify the width property of a structure tag, you set the width of just the content area. To know the full size of the element, you must add the padding, border and margin.

Example

What about height?

We can set a CSS height for any structure tag, but for our sidebar and content areas we will not. The height of these areas is determined by content. As the content grows, the area will grow, too.

Now let’s set up the styles for your structure tags. Open your style.css page and scroll down to the section that begins with the comment
/********************************************************
STYLES FOR THE MAIN SECTIONS OF YOUR PAGE
*********************************************************/

Set up the overall width an margin

Set up your header

Let’s start with these settings:

header
{
	width: 960px;
	height: 60px;
	background-color: #CCC;
	padding: 20px;
}

This header will be 1000px wide, same as your wrapper, with a gray background and 20px of padding.

Introducing the float

What about a left-hand sidebar column?

The basic setup puts the sidebar column (aside) on the right. To put it on the left:

Whichever comes first — <main></main> or <aside></aside> — on your HTML page will be on the left.

Finally, the footer