Tables No More
Well, first and foremost I’d like to congratulate you on beginning reading this article. Why? Because if you’re reading this, then you must already be willing to take that first step in ridding yourself of “Table Hell.” Not only does this article teach you the basics of how to get your site designed without the use of tables, and in a much more organized fashion, but in the end, it creates a lot less overhead for your visitors, which in turn saves you bandwidth. So lets get started shall we?
First things first, a CSS tableless design is only as good as it’s markup, and that’s a major portion of the trick to this design. You need to be able to separate your website into the major components that make it what it is. In this article, I’m going to focus on 2 pieces of the equation, those being the 2 column and 3 column layouts. Why those? Because 80% of the websites out there can fall into a 2 or 3 column layout. Sure, they may have some extra bits, but when you really get down to the nitty gritty of it, they can usually be simplified into one of those basic structures. So first things first, laying out the markup for a 2 column layout:
<HTML>
<head>
<title>2 Column Layout</title>
</head>
<body>
<div id="menu_column">
Main Menu
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</div>
<div id="main_column">
Welcome to my website! Here's the main content area!
</div>
</body>
</html>
So let’s take a look at this, first off, you’ll notice that everything is contained in DIV statements. That’s the real trick behind a CSS layout is to contain things in divs, which is why they’re known as “division” tags. So we’ve got 2 divisions, the menu_column, and the main_column, and since we should only have one of each, we’ve created them as IDs so that we’re more standardized. Now if you just plugged that in directly, it wouldn’t look like all that much, because we have no CSS attached, so let me throw down the CSS infront of you first, and then we’ll discuss how it works.
#menu_column {
background-color: #ccc;
border: 1px solid #eee;
color: #000;
float: left;
width: 200px;
padding: 5px;
}
#main_column {
background-color: #666;
border: 1px solid #eee;
color: fff;
padding: 5px;
margin-left: 220px;
margin-right: 20px;
}
The first definition is our menu_column, which is actually the more tricky of the two. When you decide which column you’re going to do the most work on, my advice is always to pick the smallest columns. So in this case, our menu isn’t going to be as big as our main content area, so we want to modify the menu, which makes sense. So, there are 2 really important pieces to the #menu_column definition that we must look at, so lets begin with the easier of the two, the width. We’re fixing the width in this instance to 200 pixels, and why is this important? Because we need to know how much to adjust the other column, so by fixing the width for this column, it will make our life easier when dealing with the other. The other key
element is the float, and this is where the real magic happens. The W3C defines a float as the following:
From http://www.w3.org/TR/REC-CSS1#float:
5.5.25 ‘float’Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/AWith the value ‘none’, the element will be displayed where it appears in the text. With a value of ‘left’ (’right’) the element will be moved to the left (right) and the text will wrap on the right (left) side of the element. With a value of ‘left’ or ‘right’, the element is treated as block-level (i.e. the ‘display’ property is ignored). See section 4.1.4 for a full specification.
IMG.icon {
float: left;
margin-left: 0;
}The above example will place all IMG elements with ‘CLASS=icon’ along the left side of the parent element.
This property is most often used with inline images, but also applies to text elements.
So what does all of this mean to you? Well, it means that a float can actually “hover” over other elements, as well as being forced to align to one side, or the center, of a given page. The part we want of that is the forcing to one side, the part we don’t want is the hover, but that’s actually something we’ll deal with in the other column. So, in our example case, we’re floating the menu to the left, though we could have chosen to float it to the right as well, it doesn’t really matter much.
Now lets take a look at the important parts of the other column, and this is where your math skills need to be up to snuff (or you atleast need to have a calculator near by if they’re not). You’ll notice there is only one big piece we need to look at there, which is the margin-left. Why a left margin? Because we’ve floated an object on the left-hand side of our page, so we need to make room for it so we’re not hovering over our content. So now, our menu_column is 200 pixels wide, so why have I chosen to do 220 pixels? Take a look at the rest of the CSS. I’ve got a 5px padding all around the menu and the main columns, I’ve got a 1 pixel border around both, and those parts are all taking up space. So it is in this margin that we must account for that space, and make sure we’ve got room to spare. It’s a little bit of math, nothing overkill, but something you need to be well aware of.
So take everything we’ve done so far, combine it into a single file, and here’s what the final result of the 2 column layout is: 2 Column Layout
Pretty fancy huh? And just think how much easier that will be to maintain than a table doing the same thing. Not only that, but if you want you can move the column to the right by changing 2 parts (float: right, and move the margin to the right), and voila, you’ve got a menu on the right hand side now. So your code is a lot more flexable, and easier to maintain. But what if you want 3 columns? Ahh, that’s a bit different, but given the skills we’ve already aquired, it’s not that big of a leap forward, so lets look at the markup changes:
<HTML>
<head>
<title>3 Column Layout</title>
</head>
<body>
<div id="menu_column">
Main Menu
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</div>
<div id=”extra_column”>
How about a shoutbox or something here?
</div>
<div id=”main_column”>
Welcome to my website! Here’s the main content area!
</div>
</body>
</html>
So now we’ve added extra_column into the mix, and we’re going to make that our right-hand column. But take notice at one thing before we go any further, notice that it is in the code above the main_column. Why? Well it’s simple really, you always want all of your floating parts before the item they’re going to be floating over. If you don’t do this, you’d wind up with the extra_column actually starting below the main_column, and that’s not the result we want. So, now lets look at the changes in the CSS.
#menu_column {
background-color: #ccc;
border: 1px solid #eee;
color: #000;
float: left;
width: 200px;
padding: 5px;
}
#main_column {
background-color: #666;
border: 1px solid #eee;
color: fff;
padding: 5px;
margin-left: 220px;
margin-right: 170px;
}
#extra_column {
background-color: #ccc;
border: 1px solid #eee;
color: #000;
float: right;
width: 150px;
padding: 5px;
}
First notable change? We’ve made room in #main_column for our right column by increasing the margin on the right to 170 pixels. You’ll remember that in our first one we had a 20 pixel margin, so increasing to 170 pixels gives us enough room for our 150 pixel right column. So yeah, the second change to notice is the addition of the #extra_column and it’s set this time to float to the right, and have a width of 150 pixels. Pretty much the same as the other column, and what would you know, just as easy to add.
Combine the two, and here’s what the final result of the 3 column layout is: 3 Column Layout
So you can easily see, I hope, how adding additional columns in this manner is relatively simple. Take some time, explore the source code of the 2 examples I provided and see how they work. Heck, save a local copy to your computer and play with them, change some of the variables and see how they react. There’s really no better way to learn how to do these things than to just sit down and play with them. I really hope this tutorial gave you the information you needed to help you get started in designing your site without tables. You’ll notice from the code I’ve provided that the overhead is a lot lower, so your filesize will go down, thereby saving you bandwidth and your visitors time. There are many many advantages of this, but before I close off this tutorial, I’m going to give you one warning when you go into this:
CHECK THESE TYPE OF DESIGNS IN AS MANY BROWSERS AS YOU CAN!
Why? Because some (especially IE) will look slightly different. The next CSS tutorial I’m going to work on is how to compensate for IE’s flaws within your CSS file, but for now, please just know that there will be some differences, and that it has everything to do with the way IE handles widths and heights. Once that article is up and running, I’ll make a link here to it so that future individuals who bread this article won’t have to go looking. You can find that article located here.
Well, as I’ve said, I hope this helps you in your goals to become a tableless webmaster. And if you use any part of this tutorial and want to show off
what you’ve done, by all means, let me know! I’ll post up a link with what people have accomplished.
Enjoy.
1 Comment so far
Leave a reply
WOW!!!
Thank you so much for this simple yet VERY enlightening tutorial. I use CSS all the time, but I am bound by implementing it within tables. I am so busy with clients it’s hard to find time to break out of the habit of using tables. But after seeing wonderful sites like those on csszengarden.com and Eric Meyer’s creations as well as being aware of standards; i REALLY want & need to learn it. Your tutorial is the FIRST one that really took the time to explain HOW/WHY the functions work the way they do.
Perhaps I’ll be sending you a link to my first tableless website in the coming months.