CSS - Tutorials - Basic page Layout

2 Column Basic Page Layout - Tutorial

Back to FAQ Home | Back to Tutorial Home

We're going to start with a two column layout for simplicity. The first column will be the navigation column and will be on the left side of the window. The main Content will span most of the window and will be fluid in design. To avoid complications at this stage I will not be using borders or padding until you have grasped the basics of the layout. (IE5 has a completely broken box model and when borders and padding are used the design falls to pieces see FAQ for a fuller example.)

To see an example of the finished page click the link below.

Finished Page

The colours are there only to show you how the layout fits together, so don't take them too seriously. I have left the finished CSS code in the page so that you can refer to it more easily (view source) without having to load it from an external stylesheet.

It's only a basic page but if you look at the source code you will see that the mark up in the body is clear of all presentational tags and looks quite simple compared to a table of similar format. This is accomplished because we have set all the presentation using CSS.

Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7

Step 1

As this is a tutorial on CSS I will assume that you have set your page up correctly, but if you are not sure just copy the xhtml basic layout code below. If you are not familiar with xhtml it is 90% html and should be easy to follow. The main differences are that all tags are lower case and all tags must be closed, even those that don't have closing tags in html i.e. <hr> becomes <hr /> in xhtml. This ensures that our code is well formed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS - Tutorials - Basic page Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>

</body>
</html>

Step 2

Now that we have our basic page set up the first thing we need to do is define the main font, font colours, background colours and margins that we are going to use. These will be the default settings for our document.

This is easy to achieve because CSS lets us redefine tags. So we can define the <body> tag in CSS and automatically enforce the new settings.

Here's the code that must be typed between style tags which are placed between the Head tags of your document.

To make things easier to follow we will create the stylesheet in the page that we are creating, but later on we will remove the stylesheet and link to it so that it can be used sitewide.

Notice that the CSS style rules are placed between the style tags but they are also placed between comment tags. The comment tags are to hide the code from older browsers that don't understand CSS. As time goes on the need for this will reduce and in fact in future versions of xhtml I believe that comments will be treated strictly as comments and this format will not be able to be used. Anyway for the time being copy the code as above.

The type="text/css" tells the browser what style to expect and the media="screen" tells the browser where the output is going.

The first part of our style rule is body which defines what the following rules are going to act upon. This is called the selector. The format is then to use { (opening brace) to start the declarations and then } (closing brace) at the end of the declaration. e.g. body {property:value;}

The property is the name of the CSS property that describes the sort of formatting you'd like to apply. Value is one of a list of allowable values for that property. A real example would be :

body {font-size: medium;}

Each definition is finished with a ; (semi colon) which tells the browser that there is more to come. If you omit the ; (semi colon) some browsers will prematurely exit the style definition and the style won't take effect. If there is only one declaration between the curly braces then you can omit the semi colon but it is probably good practice to always include it as it will do no harm if it's there but will cause problems if it isn't.

There is one other part of the style format that you may have noticed and that is the :(colon) this is used to separate the property from the value and should be used exactly as above.

Ok that's enough of the complicated stuff let's get back to our declaration:

The first thing we define is the font family that we are going to use for the body and this will be our default for the page (although we will be changing it later for different sections).

font-family: Arial, Helvetica, sans-serif;

This tells the browser to select the font Arial as it's first choice. If Arial isn't available on the clients system then Helvetica will be chosen. As a last resort if Helvetica is also not available on the clients system, we define a generic font type such as sans-serif in an attempt to influence which font is used for display. The reason for this is that we can control what happens if the client doesn't have the necessary font installed. If we just said Arial and Arial wasn't installed the results could be unreliable. You can define as many alternative fonts as you like but I think the three we have defined is good enough for now.

The next part of the style rule defines the font size and the colour.

font-size: medium;
color: #333333;

I have used the predefined size medium which will allow the text to be resized by the visitor using the browser controls and is very good with regards to accessibility. There are lots of other options but we can save them for another day. The colour (spelt color) can be defined in a number of ways but most people have got used to defining them in hex by now. You could use one of the predetermined colours such as color:red but the choice is limited. (As an exercise why not look up on the internet and see what the other allowable pre-determined color options are.)

The next part of the style rule is the margin definitions:

margin: 0px;
padding: 0px;

By default all browser give the viewing window an automatic border around the page. In some cases it is nice to remove the border and this is done by using the code above. Padding is set to 0 as well because Opera uses this at it's border instead of margin. So by including both we cover both eventualities.

The last part of our declaration is the background colour as below:

background-color: #9966FF;
}
-->
</style>

This defines the background colour (as expected) and will be our default background. It is good practice when you define a foreground colour to always define the background colour as well. This will ensure that you don't end up with white text on a white background.

Finally we close the declaration with the closing curly brace, close the comments and close the style.

If you typed that in correctly then your page should now look like this example page. If not you will have to look through and see where you went wrong.

Step 3

I know it doesn't look much at the moment but we are going to rectify that now by adding a header row. Type the following code under the last closing curly brace in the style rule. The new code is shown below in bold to show you where to put it.

The first thing to notice is that the word header begins with a full stop. This is to show the browser that we are creating a new class that doesn't already exist. The word header is one that I've made up to describe the action I want performed. We could have used toprow or anything else that helps us remember what it is for.

This means that we are creating something that doesn't exist already and giving it the name of header.( Don't forget to add the full stop before the word header otherwise it won't work.) We are giving it a name and then we will be able to reference it in our mark up later on.

After the header comes the opening curly brace that we have already spoken about and then comes the first property:value pair.

height: auto;
width: 100%;

height:auto tells the browser that the height will expand and contract to fit the content depending on how the screen is resized and on how much content their is. This means that the header will stretch on larger resolutions and shrink on smaller resolutions and the content will move and remain visible accordingly.

width: 100%; as you may guess this tells the browser to allow for 100% width at all times. The width will stretch and shrink to fit the screen at all sizes and all resolutions. (If you set a value instead of width, say 500px then the area will always be 500px and will not shrink or expand.)

The rest of the declaration sets the foreground and background colours and centre aligns the text.

background-color: #003399;
color: #FFFFFF;
text-align: center;

Before any of this takes effect we will need to call it from our mark up in the body of the document. Unlike the first declaration that we did for the body tag the header tag doesn't actually apply to anything yet. So now copy the code below into the body of your page

We are setting up a small menu that runs along the top of the screen. I won't explain the href tags as I assume you have already learned about those but the first thing to notice is the <div class="header"> tag. This is just a normal <div> tag but we have inserted our class into it i.e. class="header". The browser will now render the div and the content within the div according to the style rules that we have assigned to it. If you don't believe me have a look at how it looks now.

Your screen should now look like this example. If not re-check your code and correct any typing mistakes.

Step 4

Now we will move on to the left column. The code for that is as follows below:

.leftcolumn {
background-color: #D8D6F3;
height: 600px;
width: 25%;
float: left;
}

Type this code into your stylesheet as previously explained in step 3. Place it after the header class but before the closing content and end style tags.

We have called our style rules for the left column .left column (funnily enough) and again remember the full stop before the class name.

Most of the rules should now be familiar to you by now so I will only explain the new terms. The one we are concerned with is the one called float:left;. What this is doing is telling our content to float as far to the left of the page as it can without over-riding other content. Float is quite complicated in that content will always try to float in the direction specified (float:left; or float:right; or float:none;). That means that if something is in the way the content will float next to it. If more than one item is defined as floated then they will float in the order that they are defined in the flow of the document. i.e. float 1 floats left, float 2 floats left but next to float1 and so on. If screen width is reached the float will drop below the content to it's left.

If the float has a fixed width then as the window is resized by the user the float will try and accommodate itself by moving left. Sometimes this results in the floated element moving below the content to it's floated side in order to gain space. (i.e. underneath the content to it's left if it has been floated left and vice versa).

When the float has a width defined as a percentage (as in our example), if the window is resized smaller the floated content will reduce in size as the window is reduced. This will result in the column becoming longer to accommodate the text. Which means you have to make the column long enough to contain all the text at the shortest height or just set the height to auto. However in our case I have set the height to 600px as this will cater well for our example and will also colour the block at all times. If auto was used the block would only be coloured as far as the content.

Add this code to the body so that we can view our work so far:

<div class="leftcolumn">
<h2>This is the left column</h2>
<p>Left hand text : Left hand text : Left hand text : Left hand text : Left
</p>
</div>

Again notice how we define the area by creating a div and then entering class="leftcolumn". Anything we place in this div including text, images and other divs (or indeed other classes) will all be contained within this div.

You can see that we have created a left hand column that is 25% the width of the screen and all the text is contained in that left hand column. When the screen is resized the text will still stay within the bounds of the 25% screenwidth column.

Now would be a good time to check your page out and see if it looks the same as my example. If not review your work and correct any errors before we move on to step 5.

Step 5

Next we are going to define some rules for the h1,h2 and h3 tags so that we can brighten things up a bit. Copy the code below into your stylesheet as previously explained. Note that there are no full stops before the h1,h2 and h3 selectors as they are existing html tags.

h1 {
font-size: 140%;
color: #FFFFFF;
background-color: #CC99FF;
text-align: center;
margin: 0px;
padding: 0px;
}
h2 {
font-size: 120%;
color: #CCCCCC;
background-color: #9900FF;
margin: 0px;
padding: 0px;
text-align: center;
height: auto;
width: auto;
}
h3 {
background-color: #C9C9C9;
color: #CCCCCC;

First thing to notice is that we have set the font size of the heading tags as percentages. This means that the size of the text will be 140% (for the h1 tag) ,that's 1.4 times the size of the text that we defined in our body tag. Remember that we defined the text in the body tag as medium therefore the h1 tag will now be 1.4 times bigger than medium.This will override the default settings and will be used every time we place a heading tag in our code.

I have defined h2 as 120% and not defined any size for h3 which means it will remain at the default size.

You should know what the colour definitions mean by now so I won't explain them again. The margin and padding has been set to 0px which means that our headings will butt up close to whatever content they are in the flow of. Unless of course that content has different margins defined in which case our heading will move as close as the other margins allow.

I have set padding to 0px to keep everything simple but if you wanted space around the heading text you could declare some padding top and bottom if you felt it needed it. However be aware that IE5 interprets padding and borders incorrectly and the size of your content will vary in this browser.

The heading has been aligned to centre and the width and height set to auto to accommodate the heading text.

Add some code into your body so that we can see the effect of the above code and then have a look at the page so far.

<div>
<h1>This is the main content</h1>
<p>This is the main content : This is the main content : This is the main content : This is the main content </p>
</div>

You can see that the headings now have format and colour. You may also notice than in our header row the text that we have made as dummy links (menu1 | menu 2 etc) is very hard to see. So in the next step we will set about changing them to something more obvious.

Step 6

Copy the code below into your page as previously described:

a:link {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #003399;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
background-color: #003399;
font-weight: bold;
}
a:hover {
color: #FF0000;
background-color: #003399;
font-weight: bold;
}
a:active {
color: #990000;
text-decoration: none;
background-color: #003399;
font-weight: bold;
}

It's time to get technical again. You may notice that the format is slightly different form before. This time in our style sheet we have started it like this:a:link. This is called a Pseudo Class (classes for intangible characteristics you can't mark manually) and is the format used for declaring the anchor characteristics.All you really need to know for now is that this is the way it needs to be done.

We are going to define the link, visited, hover and active states of the anchor tag. Without going into too much detail always remember to define these states in the same order, otherwise due to the cascading nature of CSS the results will be unreliable.

So the first declaration a:link sets the foreground color, the background colour and the font weight of the link text. We have also set text-decoration to none. This means that we have turned the underline off. Usually links are underlined but I am just showing you this feature because a lot of sites are now using it.

The other states of visited, hover and active are defined in the same way but with different colours for each state. What we achieve by this is a simple rollover effect that doesn't require any javascript. Also we have defined the visited state so that the user knows that the link has been visited and the active state is the active link as it is selected.

Nearly finished, time to check out your page again. As before check your page is the same and amend any errors that you find.

Step 7

Now that we have finished the page and we are happy with the CSS we can move the CSS into an external file. Normally you would just set up your css in an external file so that you can use it sitewide. Unless of course, you were only going to use the CSS on one page only, when there wouldn't be much point in keeping it in an external file.

To move the code, copy all the code between the style tags. Do not copy the style tags or the comments (although you can add comments but we won't stray from the point here) , just copy everything else i.e. from the body selector right down to the last closing curly brace (inclusive) after a:active.

Now paste the code into a text editor such as Notepad and save the file as maincss.css into the same directory location as your basic layout page. The filename can be anything you want but it's a good idea to give a name that means something to you. The extension though must be .css so that the browser will recognise it. Finish tidying up by deleting the style tags and comment tags from your layout page.

The last thing we need to do is set up a link from our layout page to the new stylesheet that we have just created with notepad. You must insert the following code into the head of your page:

The link tag links the document to the file named in the href i.e. maincss.css. The rel attribute means relationship and tells the browser that the relationship of this file is a Stylesheet and the type attribute lets the browser also know the format it is in. So now the browser knows exactly what to do with this file and will load this file into cache and use it for administering the styles.

All Finished ! Just check your page is the same as this and that it works with the external stylesheet. Notice how compact the code is compared to a table design of similar structure.

Before you finish why not try adjusting some of the parameters in your style sheet and see what different effects you can achieve. (make a back up copy first so that you can go back to the original if you get hopelessly lost) Try setting the .leftcolumn width to a fixed size e.g. .width:300px. Try changing colours and fonts as well and just get used to setting up styles.

Have FUN.

Cascading Style Sheets