Three column website layout using CSS

A three-column layout for websites is a popular design because it allows space for navigation on the left, content in the middle, and some advertising and links on the right. But how do we create such a layout using CSS ? With HTML tables, it is easy, straightforward but it is the traditional method!!
There are three major types of three-column layouts:
  • fixed-width – In a fixed-width layout, everything remains the same size, no matter how large the user’s screen is. Such layouts have the advantage of predictability, but they don’t make good use of big screens.
  • variable-width (or flowing/fluid) – Variable-width, or flowing, layouts naturally grow and shrink with the size of the browser window. Although this takes a bit more thinking to do well, there are major advantages. It’s possible to design a layout that looks acceptable on small screens, but also uses the full screen width to display content on larger screens.
  • variable-width “main” column and a fixed-width “side” column – While it’s true that CSS doesn’t provide a handy way to say “make this column equal to the width of the browser window minus the width of the other two”, the CSS float mechanism gives us a way to accomplish that. The left and right columns can be “floated” in the left and right margins of the middle column.
How to create a fixed-width three column layout
Since we know exactly how wide we want our columns to be, all we have to do is size and position them accordingly. Here’s a simple style sheet for a three-column, fixed-width layout.
Here I use a total width of 800 pixels and divide that space among the three columns, leaving a 10-pixel gap between columns for readability.
Also, there is a top (header) and a footer (bottom) area contained in separate DIVs.
Since DIVs are positioned independently of other DIVs and the fact that DIVs are block elements, they take up 100% of available space to fit the BODY.
body{
	text-align:center;
}
.heading{
	text-align:center;
}
.container {
	width: 800px;
	margin:0 auto;
	text-align: left;
}
.left{
	float: left;
	padding: 0px 10px 0px 0px;
	width: 90px;
}
.middle{
	top: 10px;
	margin-left: 100px;
	margin-right: 100px;
}
.right{
	float: right;
	padding: 0px 10px 0px 10px;
	width: 90px;
}
.footer{
	padding-top: 20px;
	text-align: center;
	clear: both;
}
Note that we place our three column “DIVs” inside a container DIV, and we center(margin: 0 auto) that container on the page.
The float: CSS property “floats” an element at the left or right edge of its parent, “flowing” the text of the parent element around the edge of the floated material.
The clear: both property ensures that the footer element appears after any elements which are floated at the left or the right. It is also possible to clear only the element on the left or the element on the right.
How to ensure that the three columns appear in the right order?
float: is the best solution to the problem. Since floated columns begin “floating” at the point in the parent element’s text where they first appear, your HTML page must contain the left and right column div elements before the middle column. This means that the layout is “order-dependent.”
Padding and Internet Explorer
We’ll want to provide a little bit of whitespace (padding) at the right edge of the left column, and the left edge of the right column, so that we can read them easily. This is easy enough to do with the padding CSS property.
Unfortunately, Internet Explorer interprets this property differently than other browsers. Specifically, although the standards say that padding should be in addition to the width of the element, by default Internet Explorer subtracts the padding from the width of the element, resulting in an inconsistent appearance.
Fortunately, modern versions of Internet Explorer will respect the standard in this area if we specify a “strict DOCTYPE”. This means that if our HTML begins with an announcement that we want to follow the strict HTML standards, then Internet Explorer will stop running in its old “quirks mode” and play by the rules. So we’ll use strict mode for this document.
You don’t have to use strict mode to take advantage of this article— the core techniques shown here will work without it. But be aware that padding will behave differently between browsers if you don’t.
Three-Column Layout, Fixed Width, Header and Footer
Putting it all together – place the CSS code above in a file called “style_fixed.css”.
Create a file called “three_fixed.html”, place the following code in it, save and upload to your webserver (or even a local directory on your PC).
Copy the “style_fixed.css” file to the same location where the “three_fixed.html” is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style_fixed.css" rel="stylesheet" type="text/css">
<title>Three column layout using CSS</title>
</head>
<body>
	<div class="heading">
		<h1>This headline can use the entire browser window width</h1>
	</div>
	<div class="container">
		<div class="left">
			Some content for the left column.
		</div>
		<div class="right">
			Some content for the right column.
		</div>
		<div class="middle">
			Some content for the middle column.
		</div>
	</div>
	<div class="footer">
			Some content for the footer.
	</div>
</body>
</html>
When you view “three_fixed.html” in a browser, you’ll see a headline, and below it three fixed-width columns positioned at the center of the browser window. You can adjust the width and position of the left and right columns by changing the left and width styles. Just make sure to set the width style of the container class to reflect the total width of the entire layout. Otherwise centering won’t work properly in web browsers that follow the CSS standard correctly.
The middle column, of course, has the width of the container minus the widths of the left and right columns (including their padding).
How To Create A Variable-Width Three Column Layout
A variable-width or “floating” layout isn’t much trickier than a fixed-width one. And we can use the same HTML page!
One of the goals of CSS is to separate content from presentation, and this is a good example of that.
To put it on your own site, just create the file “style_variable.css”, containing the following CSS code:
.heading { text-align: center; }
.left { float: left; padding: 0% 2% 0% 0%; width: 14%; }
.middle {top: 10px; margin-left: 16%; margin-right: 16%; }
.right { float: right; padding: 0% 0% 0% 2%; width: 14%; }
.footer { padding-top: 2%;text-align: center;clear: both; }
You’ll notice that the variable-width layout code is actually simpler! That’s because we don’t have to worry about centering. Since we know that the middle column will occupy the entire browser window, minus the margins in which the floated left and right columns dwell, there’s nothing to center. Therefore the container div needs no special styling here.
We could explicitly specify width: 100% for our container, but we don’t have to. That’s because block elements like div default to 100% of the browser width.
Now, copy “three_fixed.html” to “three_variable.html”, changing the link element so that it refers to “style_variable.css” instead of “style_fixed.css”. Then view “three_variable.html” to see the difference. Resize the window horizontally to see how the percentages play out.
A Mixed-Width Three-Column Layout
As I mentioned, there’s one more type of three-column layout worth looking at: the mixed-width layout.
Here we give the left and right columns a fixed size in pixels, and allow the middle column to occupy the remainder of the page. The main advantage of this type of layout is that your content can still take advantage of all available space, while your “right” and “left” column elements can respect the expectations of fixed-width elements in your page design.
Mixed-width layouts are simple: we use the same general layout technique as the variable-width layout, but with pixels rather than percentages. As with variable width, we don’t need to worry about centering because we know the main element will occupy all of the otherwise unclaimed space.
Here’s “three_mixed.css”, a three-column mixed width layout with header and footer:
.heading { text-align: center; }
.left { float: left; padding: 0px 10px 0px 0px; width: 90px; }
.middle { top: 10px; margin-left: 100px; margin-right: 100px; }
.right { float: right; padding: 0px 0px 0px 10px; width: 90px; }
.footer { padding-top: 10px; text-align: center; clear: both; }
And that’s it! You’re ready to create fixed-width, variable-width and mixed-width three-column layouts, complete with headers and footers. Enjoy.
Rating:
56.0
194 votes
1 2 3 4 5

Leave a Reply