CSS: Simple Page Layout

Creating layouts with CSS takes practice. Through practive, and experimentation, you will gain the knowledge neccesary to choose one approach over another to best accomplish your desing goals. What you will learn in this course is a simple and practical approach to one type of layout for your pages. But before we begin we should take a moment to consider exactly what layout means.

Quite simply layout is how text is placed beside other text or page elements such as images. If you consider a page of a newspaper, layout would be how the articles are arranged in columns and how they are placed alongside images and advertising. If you consider web sites, you'll notice that many have varying content areas placed side by side. Up unitl now you have only been able to stack elements on top of one another, as in a paragraph above another paragraph. But never a paragraph beside another paragraph. That all changes now.

For the remainder of this page, you will be referring back to acutal web pages and viewing the source code. Please study the code and results of the code on the pages carefully. There are several things happening throughout but if you take the time to pay attention to the details the approach is fairly simple.

The first step in setting a layout for a page is to consider what are the main structural parts of the page. Think about the main content for the page. Is there a heading area with a logo? Is there a footer with a copyright? How about a navigation area? Likely there is. So for each of those we want to divide these off within their own areas. We do this with the use of a DIV tag <div> ... </div>. And to each of the div tags we will assign an id and a value for the id that states what that division of content is for. Consider this:

<div id="navigation">
<a href="home.htm">Home</a> | <a href="contact.htm">Contact</a>
</div>

What the above is indicating is that we have divided off the navigation area. Now take a look at something similiar within our example document to see it in complete context.

This same approach is used to define the id of each main area of the page:

header
bodycontent
footer
navigation

Take moment to review this example. Note that I have removed the paragraph tags from around the copyright area. This is in order to keep the pure contextual understanding of what a paragraph is, plus I don't want the blank line of space below this little bit of text.

Once we have eack of the major divisions of our page setup with div tags and appropriate id attributes we can then begin to style each of the sections.

Starting with the header we will set some of it's properties via CSS. Take a look.

Following through with what we started with the header, we'll style the footer and the navigation areas. View the page and the source code and please note the style being used for the navigation area. Note the width of the navigation area.

What we are wanting to do is place the navigation area to the left of the main page content. As the header graphic is 700 pixels wide, we'll set the width of the navigation area to be 200 pixels. That will leave us 500 pixels for the body content. Making these changes will provide us with this. You can see that the width of the content is now narrower than what it has been but not in proper position.

What we'll want to do is place some space to the left of the body content area to push it to the right. As the navigation area is 200 pixels wide we'll want that margin to be at least that amount. You can see it has been added here.

At this point, the elements are close to all being in position. The final piece is to get the content area up beside the navigation. We do this by adding a float property to the style for the navigation area. Take a look.

The navigation area started out as a horizontal bar. That does not make much sense now contextually, so it has been updated here.

As is the current trend in web design, pages are often centred on the users screen. To do this we must contain all the divs we have created so far in one main div which is often referred to as a wrapper. With the addition of some more CSS rules we can produce this.