Boxing Clever

by Joe Gillespie — Oct 1, 2002

Now, for a CSS box. These are also referred to as 'blocks' or 'divs' but the word 'box' is probably more meaningful.

There are two ways to define a box depending on whether it is a unique item on a page or one that can be used multiple times.

A page will normally only have one header so it can be specified something like this.

#header
{
background-color:navy;
width:100%;
height:48px
}

and within the <body> of your page you just put

<div id="header"> This is the Header </div>

to give you a 48 pixel high, navy blue header along the entire top of the page.

The hash sign (#) in front of 'header' indicates that this is an ID selector and provides the style for one unique element on the page. A 'class' selector prefixed with a period (.) is similar but can be used any number of times.

Below the header, we'll put a simple, single column text area with an ID of 'content'

#content
{
width:60%;
margin-right: auto;
margin-left: auto
}

By specifying 'auto' for the left and right margins and a definite percentage or pixel dimension for the width, this box will centre horizontally in the browser window. There is a bug in some versions of Internet Explorer that means that boxes won't centre like this and requires you to add 'text-align:center' to the 'body' style definition. If you do this, you have to make sure that you explicitly define text that you don't want centered as 'text-align: left' or 'text-align: right' because text alignment is inherited from the body style definition in some browsers.

Below the header in the <body> of the page goes

<div id="content"> Content goes here! </div>

Then, you might want a footer at the bottom of the page, so...

#footer
{
background-color:navy;
width:100%;
height: 24px
}

and

<div id="footer"> This is the footer </div> after the content section gives a browser-wide footer under the narrower content section.

Del.icio.us

Digg

Technorati

Blinklist

Furl

Design Float