Tableless Design – Basic Fixed-width layouts using HTML and CSS
Tableless Design - Basic Layout using HTML and CSS
Alright, well it seems a lot of people are still using table-full layouts on their websites.
Now, for cross browser compatibility tables actually work a little better, however, they are NOT the proper way to lay something out.
Tables should only be used for data display and not for layout purposes.
Using CSS for layout is nothing to be scared of, its actually a lot easier than figuring out all the tables.
Take a look at one of my websites: Death Note Online . This website was entirely layed out with CSS, every last bit of it.
This tutorial assumes you have some basic knowledge of marking up pages using HTML and styling them using CSS.
Lets get started:
Most websites use a header + 2 column layout. So that's what were going to be marking up. Open up your favorite editor (I recommend Notepad++ if you want a really light editor) and lets start. I'm not going to bother including doctype, but any page created for the web SHOULD have it.
<html>
<head>
<title>Hello, CSS Layout!</title>
<style>
</style>
</head>
<body>
</body>
</html>
The style tags really shouldnt be in your head, you should put them in a stylesheet and link to the stylesheet with this tag
<link href="styles/styles.css" rel="stylesheet" type="text/css">
Now that we got our basic structure you should know how to mark up the sections.
The <div> tag, which stands for division, is a way to divide your site into sections.
As you know you can add a class to any item and in your css style that class using .className{ /*css styles here*/}, you can also add
a UNIQUE id to any item on the page and style that id using #idName{ /* css styles here */}. We're going to add sections to our website and give them id's of wrapper, header, content, leftMenu, and footer.
Note: Since these items only occur once per page, we're using ID's not classes.
WRAPPER
In the body section, we're going to add our wrapper. Since this is fixed width, we are going to give this wrapper a defined width. This will allow it to display properly across resolutions. We are going to support 1024x768 and above.
Add this between your body tags
<div id="wrapper">
</div>
BORDER, this property is your friend! When i lay out pages i ALWAYS turn borders on on my divs, it just lets you visualize better. When you're done you can take them off.
Between the style tags add these styles
#wrapper{
margin: 0 auto; /*center in compliant browsers*/
width: 960px; /*960px is good for 1024x768 with no horizontal scrollbar appearing*/
border: 1px solid blue;
}
If you open this in Firefox, you will see a blue border, dont worry about the height, this will expand as we add more stuff to it! If you open this in IE7 you'll notice its not centered properly. That's because IE uses text-align to center elements. Basically, if a container has text-align: center applied to it, any items in that container will be centered. How do we fix this??
Between styles we add
body{text-align: center;} /* this will center the div, but it ALSO centers text inside it..so to counteract this we apply a text align to our wrapper*/
#wrapper{
margin: 0 auto;
text-align: left;
width: 960px;
border: 1px solid blue;
}
If we open it up in IE and FF, we'll see they look pretty similar, but not the same...WHY!??!?!
Browser differences.
We add this to our css
*{margin: 0; padding: 0;}
This resets margin and padding on all elements, and normalizes the look across browsers.
Ok, so next steps! Now that we have our wrapper, we need a header!
The Header
In between our wrapper div tags, were going to add our header markup.
<div id="header">
<p>THIS IS OUR HEADER</p>
</div>
Styling between the style tags
#header{
width: 960px; /* width of our wrapper, you can also use 100%*/
height: 100px;
border: 1px solid red;
}
We should now have something like this:
The Menu
We're going to add our menu bar.
Add this after your header div like so:
<div id="header"></div>
<div id="leftMenu">LEFT MENU</div>
NOW THE STYLING :O
#leftMenu{
width: 150px;
height: 400px;
border: 1px solid orange;
}
You should be able to see the layout coming together a little better if you preview it with your browser. The reason I add the borders is because it lets you do this. Just seeing words is not enough sometimes, you need to know exactly where a box is , and be able to see its outer bounds.
I intentionally left certain styles out of the left menu, because it is gonna give you a better idea of layouts and how they work.
Next, we will put our content div in
Add this below the ending tag of the leftMenu div.
<div id="content"></div>
Your body should look like this:
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="leftMenu">
Left MENU
</div>
<div id="content">
CONTENT
</div>
</div>
</body>
Now we style the content div!
The wrapper is 960px and our left menu is 150px.
960-150 = 810px.
We have 810 pixels to work with, and to be safe we're gonna leave 10 out for margins and paddings.
#content{
width: 800px;
border: 1px solid purple;
}
We're now left with:
You will notice that the content div is underneath the menu and not to the right of it. The reason for that is that block elements (div are block elements) take up their own line. Since the leftMenu takes up its own line, anything that comes after it will get put on the next available line. To have the content div be on the same line as the leftMenu we will float the leftMenu left. This takes it out of normal flow.
Add this style:
#leftMenu{
keep all styles already
float: left;
}
You'll notice that in IE the site looks ok, and firefox it looks awful.
...well believe it or not firefox is acting appropriately and IE is acting bad.
Lets fix this. Since our menu is 150px wide, we will have to push the content div left 150px + extra if you want space in between (remember the 10pixels i left out so we can play with them?
Add this style:
#content{
margin-left: 155px;
}
Looking a little better.
One thing youll notice is that in Firefox, the orange menu sticks out of the wrapper.
The reason for this is that the leftMenu is floated left, and floated elements are not part of normal flow, therefore their height does NOT expand its parent container. The reason IE works is because they have programmed it to look at the left floated height, and expand the divs themselves, dont ask me why.
At this point, you got a pretty decent layout and the content div will stretch based on the elements you put into it. Try adding <p>This is text</p> into the content div, and copy paste it about 10-15 times. You'll notice the div stretch. If you want to leave this layout (without a footer) you can. Add this after the content div.
<div class="clear"></div>
Now in your css add this:
.clear{clear: both;}
The options for clear: are ...left, right, both.
What this does is put a div in that clears any left and right floated divs. Since it clears the left floated leftMenu, it will be put underneath it (allowing the wrapper div to expand properly).
FINAL LAYOUT WITHOUT FOOTER
Download layoutnofooter.html
(Right click and click Save Link As...)
Now, what if we want a footer. Change the <div class="clear"> to <div id="footer"></div>.
Then style it
#footer{
clear: both; /*placed under any floated elements*/
width: 960px; /* entire width of our wrapper */
height: 50px;
border: 1px solid yellow;
}
FINAL PRODUCT WITH FOOTER:
Download layoutfooter.html
(right click and click save link as...)
Once you have this layout, you can add a banner to the header div, menu links to the leftMenu div, content to the content div, and copyright information to the footer.
Dont forget to turn borders off 
Enjoy and comment!
upcoming tutorials
: Simple menus using unordered lsts
: Wallpaper/image gallery using unordered lists and slimbox!
June 22nd, 2009 - 14:35
I was just messing around with this tutorial and I was trying to mess around with the basic layout. When trying to add a right menu in the same style you added a left I cant get it to come level with the right page. If I add a float: right; to the right menu it is in the right place horizontally but not vertically. If I float the content left then everything becomes screwy. Any Ideas?
June 22nd, 2009 - 15:04
Never mind I figured it out. Thanks for the tutorial. It is great.
June 22nd, 2009 - 16:07
For anyone whos wondering the same thing, increase the width on the floated left div and decrease the width on the margin-lefted div.
content div floated left, menu margin-lefted
February 11th, 2011 - 01:22
Great basic tableless layout tutorial. Thanks Josh.
Peter in California