The Two Column Fixed Layout
The Two Column Fixed Layout
The simplest layout to start with is the fixed two-column layout with a footer and a header. I also want to explain as I go why I do a lot of things that you will notice as standard in my layouts.
I have a demo page of this layout that shows what we are trying to acheive. It is fully commented in the source code to help you understand it. Following is the CSS code, we are going to go though it a line at a time. But before we do I want to explain something. When designing a page using CSS it is very important to mark things up as what they are. By this I mean that a menu which is a group or links in no particular order should be marked up as an unordered list. The page header should have a level 1 header in it etc.
This is what we put down first. Different browsers use different default values for the margin and padding, so I like to enforce my own. You might want to put a few other things in here such as the text color, font size or type.
This is our wrapper, it wraps around everything else to control its size. Here I set the width to 800 pixels. I don't normally go much over 800 because not ever one has a big screen or have it on a high resolution. So we don't want them to have to side scroll to view the content. You might be wondering what I am setting the margin for. This actually centers the content, because the value auto set the margin on both sides of the wrapper div the same.
This is not vital to the page layout, but I just to get you thinking. The first statement centers the text in the header. The second change the font size of the h1 element. I have this here to remind you that you can change its font size so there is no reason for not using it just because it is too big by default.
These are four very important parts of the page layout. So look at them closely. I have floated the menu and the content left. Floating block level elements allow them to align next to each other. Which is just what we want. If I changed it from left to right, they would swap position and the menu would be on the right. Much more flexible than tables could ever be. I have also set there width, which adds up to 800, the maximum with. If you made them wider, they would go out of position, try it some time. Also and important note, the width is the total of the width declared in the width property the along with that in the margin, padding and border. So if I set a border of 2 pixels, a padding of 8 pixels, and a margin of 10, I would have to put 560 in the with property.
We all so have the #menu ul selector, this changes the padding and margin of the unordered list. The defaults are to big, so we change them to what we want. The final declaration removed the bullets form the unordered list we use as our menu.
This is the final rules for our layout. Clear:both clears all floats. This prevents the menu and content popping out side the wrapper. There are other ways of doing this, but this is the simplest on this layout. Here is also the HTML used for this layout so you can have a look at it.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="two_column_fixed.css"> <title>Two column Fixed CSS Layout</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Your header</h1> </div> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="something.html">Something</a></li> </ul> </div> <div id="content"> <p>Your content goes here</p> </div> <div id="footer"> This is the page footer </div> </div> </body> </html>
So there we have it, our very first CSS layout. Quite simple really once you have worked it out. This has will be the most detailed of all the parts of this tutorial since I will presume you had read and understand it before you tackle the next layout, since they all work of the same principles as this one does. If you would like to you can download the zip file that contains an clean copy of this layout for your own use.
