How to make a Tableless 3 Column List using XHTML/CSS
Guide Overview
The purpose of this guide is to show how a tableless 3 column ordered or unordered list can be achieved utilizing XHTML and CSS. The following example uses no tables and validates according to W3C standards. As is, this model is compatible with all modern browsers. Because it is a pure list, it also degrades organically, making it a totally accesible and search engine friendly method of listing content.
Instructions
- Open up Notepad or your preferred text editor.
- Copy and Paste the following code into your text editor of choice.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tableless Three Column List</title>
<style type="text/css">
<!--
body {
margin:100px 0px;
padding:0px;
text-align:center;
}
#container {
width:500px;
margin:0px auto;
text-align:left;
padding:0;
border:1px solid #000;
background-color:#eee;
}
li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
margin-left: 0;
}
li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
margin-left: 13em;
}
li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
margin-left: 25em;
}
#listyles {
display: block;
padding: 0;
margin: 0;
width: 100%;
list-style-type: none;
}
a:link {
color: #06f;
text-decoration: none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
li.col2a, li.col3a {
margin-top: -7.5em;
}
#listyles li {
line-height: 1.5em;
}
-->
</style>
</head>
<body>
<div id="container">
<ul id="listyles">
<li class="col1a"><a href="#">LinkHere</a></li>
<li class="col1b"><a href="#">LinkHere</a></li>
<li class="col1c"><a href="#">LinkHere</a></li>
<li class="col1d"><a href="#">LinkHere</a></li>
<li class="col1e"><a href="#">LinkHere</a></li>
<li class="col2a"><a href="#">LinkHere</a></li>
<li class="col2b"><a href="#">LinkHere</a></li>
<li class="col2c"><a href="#">LinkHere</a></li>
<li class="col2d"><a href="#">LinkHere</a></li>
<li class="col2e"><a href="#">LinkHere</a></li>
<li class="col3a"><a href="#">LinkHere</a></li>
<li class="col3b"><a href="#">LinkHere</a></li>
<li class="col3c"><a href="#">LinkHere</a></li>
<li class="col3d"><a href="#">LinkHere</a></li>
<li class="col3e"><a href="#">LinkHere</a></li>
</ul>
</div>
</body>
</html>
- Click File ---> Save as...
In Notepad, change the Save as type to All Files. Give your file a name with the extension .html and save it to the directory of your choice.
- Now, open the new .html file in your browser to see how it looks.
/* Optional Styles, used for presentation */
body {
margin: 100px 0px;
padding: 0px;
text-align: center;
}
#content {
width: 500px;
margin: 0px auto;
text-align: left;
padding: 0;
border: 1px solid #000;
background-color: #eee;
}
a:link {
color: #06f;
text-decoration: none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
/* End Optional Styles, used for presentation */
/* Essential Styles */
li.col1a, li.col1b, li.col1c, li.col1d, li.col1e {
margin-left: 0; /* Column 1 horizontal positoning. Adjust as needed. */
}
li.col2a, li.col2b, li.col2c, li.col2d, li.col2e {
margin-left: 13em; /* Column 2 horizontal positioning. Adjust as needed. */
}
li.col3a, li.col3b, li.col3c, li.col3d, li.col3e {
margin-left: 25em; /* Column 3 horizontal positioning. Adjust as needed. */
}
#listyles {
display: block; /* Needed to make lists behave. */
padding: 0;
margin: 0; /* Set body margin and padding to get browsers consistency. */
width: 100%; /* Set to 100% to let the columns determin positioning */
list-style-type: none;
}
/* Column's 2 and 3 are given negative top margins by taking the number of list items * line-height, this example has 5 list items per column, and a line height of 1.5em: 5 * 1.5= 7.5(add negative margin) = -7.5em. */
li.col2a, li.col3a {
margin-top: -7.5em;
}
#listyles li {
line-height: 1.5em; /* This not only spaces the list items, but is is used in the calculation for li.col2a, li.col3a heights. */
}
- This list will need to be contained inside of another element such as the one used in this example. So, with that said, the overall width of the list will be controlled by the container it is placed in.
- The horizontal positions of each column are easily adjustable by dividing the columns into thirds, or how ever you see fit. In this example, column 1 is set to "0", column 2 at 13em and column 3 at 25em. You may want to actually insert your content before positioning for good, because you will surely want to make the content look as uniform as possible, and you may have an entry that is longer than the other list items.
- All the list items horizontal positions are stated using shorthand, and for best results no other styles should be added to the three shorthand declarations with the margin-left: 0; margin-left: 13em; margin-left: 25;sytles respectively.
- Probobly the most important aspect of this list working is the correct calculation of "negative top margin". If incorrectly, a rather unattractive result will occur. So this doesn't happen, we need to understand what makes this happen in the CSS. It starts with the CSS element labled #listyles. We have declared it a "block" element, and stated that there is no margin or padding, with a width of 100%. This places the list in the top left position.
- Now we look at the CSS element named #listyles li. This is where the "line-height" is declared, giving the list better readability, as well as providing the critical "height" we need to calculate negatice margin.
- It is important to also have an even amount of items in each column, because the number of items in each row is the second part of what determines negative margin. In this example, there are 3 columns of 5 items. We know our line height is 1.5em. Now, multiply the number of items, by the line-height. (5 x 1.5= 7.5em). This will be a style declaration of "negative top-margin", and it will apply to the first list item in rows 2 and 3 li.col2a, li.col3a .
Edited by nosnhoj#3, 20 June 2006 - 01:18 PM.
Back to top
