Create a two column page layout using CSS
Incase you haven’t noticed, web pages with a table based layout are a thing of the past! These days, if you’re serious about web design or development then you really ought to be using CSS to generate the layout of your web pages. The benefits of using CSS are numerous, but amongst them are the following:
• Web pages with a CSS generated layout have a better chance of doing well on Google (because there’s less “junk” in the source code)
• You can change entire designs of CSS based websites easily and effortlessly
• CSS generated websites tend to be more compatible with screen readers, giving blind and short sighted people a better chance of being able to use your website.
One myth about CSS however, that really must be cleared up is the myth that CSS driven websites work better across a wider range of internet browsers than table based page layouts. This is absolutely not true. CSS is still very much in its infancy and if you’re in the business of building website via CSS then I would urge you to download a handful of popular internet browsers and to constantly check that what you’re building behaves as it should across a range of popular browsers. As a bare minimum, I would recommend that you test your applications on both Internet Explorer and Firefox. You’ll be amazed at how differently these two very popular browsers behave when they’re dealing with CSS. But don’t lose heart. Provided we keep testing our websites as we build then we should hopefully avoid any nasty browser compatibility surprises in the future.
One of the things that people like to do with CSS is use it to layout webpages. In this tutorial I’m going to show you how to build a two column page layout using CSS. The layout that we’re attempting to create will feature; a header (i.e., a strip along the top of the web page, perhaps for a banner), a main content area that will be split into two columns (one thin margin on the left for navigation and one thicker column on the right for the main content. And, of course, our page will also have a footer (for copyright notices, contact details, more links or whatever else you want to put there).
Ok. The first thing we want to do is create the following two things:
1. A webpage
2. A CSS style sheet that tells the web page how it should look.
Let’s start by creating the basic webpage! Programs like Dreamweaver will help you to generate the HTML code that's required for a basic webpage. There are a few variations on how to do this, but the code that I’m going to use for my web page is as follows:
<html>
<head>
<title>Two Column Page Layout Using CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="teststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
Here is the content of the webpage.
</body>
</html>
Notice the line that says:
<link href="teststyle.css" rel="stylesheet" type="text/css">
This tells the webpage to look for and utilise a CSS stylesheet called stylesheet.css.
Ok, our webpage is pretty much ready for business. Now save the webpage as test.htm, test.html. test.php or whatever other variation you prefer to use. Personally speaking, most of the webpages I build end up getting bombarded with PHP code so I tend to save my web pages with a .php suffix.
Now, let’s edit the webpage and begin the process of building a two column page layout. To do this, replace the bit that says “Here is the content of the webpage” (I have no idea what I was thinking of when I wrote that!) with the following:
<div id=”header”>Here is the header</div>
<div id=”leftside”>Here is the left side</div>
<div id=”content”>Here is the main content area</div>
<div id=”footer”>Here is the footer</div>
Now save the webpage and see how it looks on your browser. I realise that we haven’t actually created any CSS commands yet, but there’s no harm in reminding ourselves of where we stand. Your webpage should look something like this:
Hardly worth writing home about, huh?
Ok, brace yourself now because we’re about to start changing our webpage with some CSS. But before we do so, I’d like to quickly say that in my experience the single biggest mistake that people make when they’re building CSS generated websites is they make the process too complicated! CSS does not have to be complicated at all. By constructing stylesheets which are simple (and I make no apology for using the word!) we stand a better chance of avoiding errors and having our websites working across a wider range of browers.
Ok. Let’s open up Notepad and write the CSS code that will control the header. For the sake of this example, let’s make the header red with a width of 760 pixels and a height of 150 pixels. To do this we enter the following:
header {
background-color: red;
width: 760px;
height: 150px:
}
Now, save this file as teststyle.css. Be sure to put the stylesheet in the same folder as your test webpage (test.php) and then go ahead and preview the results in your browser. You should now get the following:
Not bad eh? Now, let’s go ahead and write the CSS for the left margin and the main content area. For the sake of this demo, I’m going to make the left margin 150 pixels wide (and give it a green background colour). I’m going to make the main content area 610 pixels wide and give it a yellow background colour. The height of the webpage is going to vary depending on how much content there is, so I’m not going to bother mentioning height at this point. The following addition to our CSS code should set us well on our way:
#leftside {
background-color: green;
width: 150px;
}
#content {
background-color: yellow;
width: 610px;
}
If you view your page now, you’ll notice that the content (yellow area) is sitting underneath our green margin. This is clearly not good, so we need to find a way of making the content sit on the right hand side of the margin. We achieve this by adding a float: left command to both the left side and the content divs. This means, that by this point our CSS code should be as follows:
#header {
background-color: red;
width: 760px;
height:150px;
}
#leftside {
background-color: green;
width: 150px;
float: left;
}
#content {
background-color: yellow;
width: 610px;
float: left;
}
Run this through your browser and you’ll see that the two column page layout is really starting to come together. One thing that needs to be defined before we can go any further, however, is our page footer. For the sake of this demo I’m going to make the footer 50 pixels high with a pink background colour. Naturally, the footer will be the same width as the header. So, the following addition to our CSS code should do the trick:
#footer {
background-color: pink;
width: 760px;
height: 50px;
clear: both;
}
Note the use of the clear: both command. This makes sure that the footer will not have other content on the left or right hand side of it (and therefore forces the footer down the page). On some browsers the page will look fine without the use of the clear: both command. But we don't want to take any chances, so please do go ahead and put it in there. Ok. Run this through your browser and you should have a web page that looks something like this:
Well, I guess it’s safe to say we’re pretty much at the finishing line and I’m very tempted to end the tutorial there. But there’s still a couple of other things that we could do to make our page layout even better. First of all, let’s move the layout away from the left hand side of the page and make it sit bang on in the centre of our screen.
To do this, we want to create a new div called “pagewidth” and we want to put this new div in the center of our screen and then encase ALL of our web content inside this new div. So, let’s create the new div with the following code:
#pagewidth {
width: 760px;
margin-left: auto;
margin-right: auto;
background-color: silver;
}
Please note that I would recommend putting this code at the top of your stylesheet, since it’s going to be higher up the hierarchy than all of the other CSS that you’ve created so far. In order to make the pagewidth div sit in the precise centre of the screen I’m using the commands margin-left: auto; and margin-right: auto; …this will do the trick nicely.
Now, go to your webpage code and encase all of your page content inside the pagewidth div. I think it’s also a good idea to beef out the page with some more content, just to see how the page will behave once it fills up with more content. So I’m going to fill out the left hand margin and the main content area (the yellow bit) with some meaningless chunks of text. Your HTML code for the webpage should now look something like this:
<html>
<head>
<title>Two Column Page Layout Using CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="teststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewidth">
<div id="header">Here is the header</div>
<div id="leftside">Here is the left side
Here is the left side
Here is the left side
Here is the left side
Here is the left side
Here is the left side
Here is the left side
</div>
<div id="content">All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad.
<p>All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad.</p>
<p>All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad. All work and no play makes Jack a dull lad.</p></div>
<div id="footer">Here is the footer</div>
</div>
</body>
</html>
Notice that the pagewidth div is surrounding all of the html code that relates to page content. I’ve also given the pagewidth div a silver (grey) background in my CSS stylesheet. Again, this was just so you could see where the div is.
Run this and your page should now look like this:
We're almost finished. If you’ve followed me up till now, well done! The page I’ve built is of course, full of nonsense and a bit of an eyesore, but in a real situation you could easily add all kinds of wonderful content to the various sections of your webpage. This includes using nice background images on the header, leftside and footer to make them more attractive looking.
Speaking of background images, there is of course, one problem with our page that still needs to be dealt with as a final touch- we need to get rid of the ugly grey area showing when our main content div (the yellow bit) is not the same height as our margin (the green bit). Ideally, the green margin and the yellow content area should always be the same height.
Many web developers seem to spend countless hours wrestling with this annoying problem (making the left side and right side the same height), but recently I stumbled across a solution that is so simple, you’ll be tempted to put it in the too good to be true file! All we have to do is to simply give the pagewidth div a background image that shows a thin horizontal strip of the magin and content backgrounds. We then simply make this thin strip a background image on the pagewidth div that repeats along the x axis. Is that easy or what?!!!
So, our image (the thin strip) should look something like this:
…oh, and don’t forget to save it in a folder called “images”!
We now get rid of the silver (grey) background command that is featured in the pagewidth definition and replace it with some commands that will turn our image into a repeating background image. So, our pagewidth code should now look as follows:
#pagewidth {
width: 760px;
margin-left: auto;
margin-right: auto;
background-image: url("images/greenandyellowstrip.gif");
background-position: top center;
background-repeat: repeat-y;
}
Run the whole shooting match through your browser and you should get this:
So there you have it- a complete two column page layout without a hint of any horrible and messy table tags! Congratulations! (David Connelly)
