Create a Tableless Layout
I bet you've heard the coding obsessed web designers getting their knickers in a twist about CSS layouts, yet you don't know the first thing about them, right? Obviously that's why you're here! Well, providing you have a little CSS knowledge and know how to separate style from content, you should find this tutorial a doddle!
Tableless Layout Basics
Firstly, let's take a look at your current coding. I bet it probably looks a little like this:
<html>
<head>
<title> my website </title>
<meta name="keywords" content="joe bloggs' website, site, pages,">
<meta name="author" content="joe bloggs">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="main">
<tr><td>
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
</td></tr>
<tr><td>
<h1>Welcome to my website</h1>
<p>This is my wonderful website with funky content and groovy images!</p>
</td></tr>
</table>
</body>
</html>
Look at those terrible tables. Messy or what?! Anyway, <table>s are designed for tabular data — stuff like numbers and statistics, not for presentation of layouts. This means we have to find an alternative: <div>s — a highly adaptive block-element tag which can work just as well as tables.
A <div> works like most other HTML tags — most importantly you can give it an ID and assign attributes to it using CSS (in fact, this is the key to tableless layouts). <div>s can go inside other <div>s, can be floated, resized, recoloured and positioned. If you can do it to a table, you can do it to a <div>.
Let's redo that page up there, assigning <div>s instead of <table>s (every 'block' of table needs a div):
<html>
<head>
<title> my website </title>
<meta name="keywords" content="joe bloggs' website, site, pages,">
<meta name="author" content="joe bloggs">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="image">
<img src="images/bla.gif" align="left" alt="layout image 1"><br />
</div>
<div id="main">
<h1>Welcome to my website</h1>
<p>This is my wonderful website with funky content and groovy images!</p>
</div>
</body>
</html>
You can now customise those <div>s using normal CSS. As we've given the <div>s in the above example IDs, we customise them like so:
#image {
float: left;
width: 500px;
}
..where image is the name we gave one of the <div>s in the example above. If we had assigned the <div> a class instead of an id, this is how we'd customise it:
.image {
float: left;
width: 500px;
}
There's not much difference between the two, so be sure to assign the right thing. Now that is the basics of creating a tableless layout — using <div>s and then customising the <div>s with CSS. Now, onto actually creating CSS only templates...
Tableless Templates
So, you've figured out that <div>s are the magic boxes of the CSS world, now what can you do with them? Tons! Although most n00bs would try and make you believe that there's things you can't do with <div>s, they're not giving you the whole truth. For example, let's look at a common table-based layout:
| header image | |
| content column | linkscolumn |
A lot of people think you cannot replicate this with CSS. Try coding up three <div>s in an example page and see what you get; anything like that example above? No. This is where you need to learn about an integral part of CSS based layouts: floats.
Firstly, one thing you need to realise about floats is that once they're assigned, the element you've assigned them to will 'stick' to the furthest side they can reach. For example, look at the example below. It is a <div> (represented in blue) floated to the left of a page/browser (black) with no other elements.
If you've got a fancy pants layout set up in/with that <div>, you probably won't want it resting again against the left hand side of the browser. Even if you use the centering cheat the <div> will stick to that left hand side — this is where a container <div> comes in handy. A container <div> is just a normal <div>, but you assign the properties which position the main 'bits' to this <div>. First, let's stick the container in the page, between the <body> tags:
..etc..
<body>
<div id="container">
</div>
</body>
..etc..
Now we just customise it in out stylesheet like we would a normal <div> (the code below demonstrates an example of the centering cheat; this would center the container):
body {
text-align: center; /* center things in pre-IE6 */
}
#container {
margin: 35px auto;
width: 500px;
text-align: left;
}
Our page should now look a bit like this; the container is represented in blue:
You're probably thinking something like "well that's all fine and dandy, but it doesn't look anything like the table layout at the top of this page!" — this is where we start adding more <div>s along with some handy floats. The first <div> we add will need to replace the header. This is the easiest part, we just add a <div> inside the container, and give it an id of "header" (at the moment, just so we know which is which):
..etc..
<body>
<div id="container">
<div id="header"> </div>
</div>
</body>
..etc..
In this header, you'd probably stick your top image or any fiddly text you want to flash up your style. That's the easiest bit, and doesn't require any floats or special properties. Now for the columns:
..etc..
<body>
<div id="container">
<div id="header"> </div>
<div id="content"> blabla content </div>
<div id="sidebar"> blabla links </div>
</div>
</body>
..etc..
First decide how big you want this content column: as I set the container to 500 pixels above, 380 pixels would be a sufficient width. This leaves 120 pixels for the sidebar (links) column. Let's specify these in our stylesheet (I've left the other stuff in so you know where we're up to):
#container {
margin: 35px auto;
width: 500px;
}
#header {
width: auto;
}
#content {
width: 380px;
}
#sidebar {
width: 120px;
}
However, even with these <div>s declared, your page will still look something like this (red: header / green: content / pink: sidebar):
We need to give our columns some floats. As the content column is on the left, it'll need a left float. The sidebar column is on the right, so that'll need a right float. We assign these using CSS like so:
#content {
float: left;
width: 380px;
}
#sidebar {
float: right;
width: 120px;
}
That's pretty much it. Your <div>s should now be correctly positioned, and should look a bit like this (without all the pretty colours):
The two columns should float against the correct sides of the container side-by-side without problem, as long as the total of both columns does not exceed the width of the container. That means if you assign padding, margin or a border to either of the columns, you must subtract that total number from the width of the column you've assigned it to. If you're still a bit clueless and need a 'live' example, you can download a basic header and two-column template for testing and inspiration.
Help! My container background is not appearing properly?
Certain browsers will not show the background behind floated divs unless you 'clear' them. To get past this little problem we need to add another div before we close our container, a footer div:
..etc..
<div id="sidebar"> blabla links </div>
<div id="footer"> </div>
</div>
</body>
..etc..
Then we clear it in our stylesheet, by adding this to the bottom:
#footer {
clear: both;
}
As simple as that!
Tags:
,
Last Updated On: 22nd March 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources