How to Create a 5 Column Tableless CSS Website Template
Laying out a web page with cascading style sheets instead of tables can be difficult for people who are used to table-based code, especially when it comes to placing information side by side, in columns. Once you learn the basic techniques, you'll find it so easy to create a five-column tableless CSS website template that you'll never go back to the bad old days of tables again.
Other People Are Reading
Instructions
-
Set Up the HTML
-
1
Construct a container element to hold all your columns in the body of your HTML document. Place that container div between the opening and closing body tags:
<div id="column-container">
...
</div> -
2
Place five more divs inside the container div: one for each column. Give them the class "column," which we'll use later to give them style.
<div id="column-container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div> -
-
3
Make sure you have a referenced style sheet or style tag in the head section of your document:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>OR
<head>
<style type="text/css">
...
</style>
</head>
<body>The first method is recommended, unless you're working on a page that you can't change in that regard because of company guidelines.
Set up the CSS
-
4
Apply the following container style in the stylesheet or between the style tags in the previous step.
div#column-container {
width:95%;
margin:0 auto;
overflow:auto;
border:1px solid #000;
}This container exists to hold the columns so they can be placed on the screen, for example in a centered page layout. In this example, the container is 95% the width of the browser screen, and centered. There's a border so it's easy to see where the container sits on the page. Using a technique developed by CSS expert Paul O'Brian and made popular on SitePoint.com, the "overflow:auto" rule forces the columns to "clear" so that the container doesn't collapse to zero height.
-
5
Apply the following column style beneath the code in the previous step:
div#column-container div.column{
width:20%;
margin:0;
padding:0;
float:left;
}This code makes each column exactly one-fifth (20%) of the width of the container. The "float" statement makes the columns stack up from left to right, the leftmost column being the first column that appears in your HTML markup.
-
6
Load the document in your favorite browser to see the results of your code.
-
1
