Hrvatski

printer friendly version

Coding a tableless (CSS) two-column layout

This tutorial explains how to code a standard fixed-width two-column layout using CSS floating. I expect that you know the basics of HTML and CSS, so I won't explain them in detail here - refer to my other HTML tutorials for detailed help and explanations.

Note: Please read the tutorial name carefully. This is not a tutorial on coding table layouts — hence the name tableless. So please, before you e-mail me asking me to explain my "table tutorial" make sure you at least read it first. Thank you.

Design

I won't guide you through this step, because it's entirely on you. Besides, I've already wrote a tutorial about designing a layout. Just make sure it's a design that will go well with our two-column strategy. Open your favourite image editor and make something pretty. When you do that, come back here for the rest of my wisdom.

layout design

Note: I wrote this tutorial back in the day when 800x600px screens were common. I fixed this in my tutorial on design, but since I am using a real example layout here, all my dimensions are still fit to 800x600px. If you're designing for minimum of 1024x768px screens, you will have to make the numeric values adjustment yourself, just use this as a guide.

As you might have noticed, the light pink area is provided for content, and the brick red on the right is for navigation. Now that we know this, it's time to slice. I am not using the slice tool for this because it generates names, and I like to have recognizable names for images. Besides, I prefer controlling everything myslef.

Flatten the design. While it's flattened, you may adjust the colors a bit. Take the marquee tool and select the header. Copy it, open a new canvas, paste, save as header.gif or whatever you like. Repeat the process for footer, and the background. My header, footer and background look like this:

header

footer

background

Background will repeat itself vertically - I had to slice wisely, so it doesn't look broken on some places. If you have "solid color" areas you can use images, or style the background and borders in the styleshet itself. Since my design edges are "scrapped" images are inevitable.

General layout

As we decided, the layout will have 4 main portions - header, footer, content space and navigation. Header and footer take up the entire width, thus they are easy to set up and style, while content and navigation reside beside each other, sharing the layout width. Let's start with the easiest part.

The first thing I code is a div with ID container. Some people call it wrapper, some call it outer, you can call it jimmy if you want to give a personal feel to it - it's purpose is the same in either case: holding the entire layout and positioning it regarding the body. Width of this element will be the maximum width of your layout.

Inside this main div, we will insert header, content, navigation and footer. Here's how it looks all together (note: I omitted essential tags that form a document, I will just write snippets of code to be inserted in the body and stylesheet. I expect you to know where each part should go.):

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="navigation">
</div>
<div id="footer">
</div>
</div><!--container end-->

Now insert some content accordingly inside each div. Header can be empty, or hold image slices. There is a reason why I chose header as background instead of more sliced images, we'll get to that part. Anyway, fill 'em up. I'm using generic text.

<div id="container">
<div id="header">
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
	<li><a href="#">Home / Blog</a></li>
	<li><a href="#">About the Site</a></li>
	<li><a href="#">The Webmistress</a></li>
	<li><a href="#">Guestbook</a></li>
	<li><a href="#">Links in/out</a></li>
</ul>
</div>
<div id="footer">
Copyright &copy; <a href="mailto:your@address.here">Your Name</a>.
</div>
</div><!--container end-->

Now that you did that, the page looks really poor.

layout with no style applied

Never mind that, now comes the fun part. We'll add some style to it.

body {
	background: #bfadad;
}
#container {
	background: url(images/bg.gif) repeat-y;
	width: 755px;
}
#header {
	height: 262px;
	background: url(images/header.gif) no-repeat;
}
#footer {
	background: url(images/footer.gif) no-repeat;
	height: 68px;
}

If you know the basics of CSS, there should be no problem understanding what each line of this code does. I applyed backgrounds and width to the container, header and footer. Let's check it out in the browser.

layout with styled header, footer and background

Pathetic. But, if we forget about the text for a moment, everything else seems fine - the header and footer are in place, only the content and navigation are off. No wonder, since no styling is applied to them yet. Here comes the hardest part of this tutorial, floating.

Actually it's pretty simple, but don't get discouraged if it doesn't work from the first shot. You'll need to adjust the numeric values until everything sits on its place. Thanks to the ruler in Photoshop (Ctrl+R), I found out that my content area will be 470 pixels wide, and navigation will be 190 px wide. We'll set the widths of these elements and float them next to each other.

body {
	background: #bfadad;
}
#container {
	background: url(images/bg.gif) repeat-y;
	width: 755px;
}
#header {
	height: 262px;
	background: url(images/header.gif) no-repeat;
}
#footer {
	background: url(images/footer.gif) no-repeat;
	height: 68px; 
	clear: both;
}
#content {
	width: 470px;
	float: left;
}
#navigation {
	width: 190px;
	float: left;
}

Note that I added one more value to the footer, clearing. This is neccessary, because we want the flow of elements to continue in a normal way. By floating, we broke the normal flow, and by clearing we're repairing it. Try without the clear value and you'll see what I mean. Here's how it looks:

floated layout

Not too pretty, but at least we've accomplished something: the content and navigation are beside each other, not under each other. There is also one more problem - both of them are too low - there is huge empty space above them, so we must lift them up a bit. We'll do all that in one shot: margins.

Just before we start, a quick memo: margins can be set separately, margin-top, margin-left and so on, but they can also be set in one line, margin: 1px 2px 3px 4px; where 1px represents the top margin, and the rest of the values refer to all other margins clockwise: 2px right, 3px bottom, 4px left.

body {
	background: #bfadad;
}
#container {
	background: url(images/bg.gif) repeat-y;
	width: 755px;
}
#header {
	height: 262px;
	background: url(images/header.gif) no-repeat;
}
#footer {
	background: url(images/footer.gif) no-repeat;
	height: 68px;
	clear: both;
}
#content {
	width: 470px;
	float: left;
	margin-top: -80px;
	padding-left: 46px;
}
#navigation {
	width: 190px;
	float: left;
	margin-top: -20px;
	padding-left: 30px;
}

Take a look at the last two blocks — top margin for content is set to -80px. The negative value -80px means that the entire div will be lifted up for 80px, instead of moved down if the value was positive. Learn the use of negative margins because you will most likely need them. Left padding will nudge the text to its proper place so it fits within the borders we drew.

Now I should explain why I set header as background instead of image tags - since the text is lifted up, it overlapps the header. If header was a set of image tags, it would overlap the text. It's much shorter and more correct this way.

floated layout with margins applied

We can see that the content and navigation are right where they're supposed to be - inside the drawn borders. Now that the general layout is done, we might consider another thing: alignment. You may want the layout to be centered on the page, or maybe aligned right. Here's how to center it:

#container {
	background: url(images/bg.gif) repeat-y;
	width: 755px;
	margin: 0 auto;
}

Here, only the style for #container is shown. We've added margin: 0 auto; which tells the browsers to calculate margins so that there is the same amount of whitespace by each side (left and right) and no whitespace at the top and bottom. CSS margin: 0 auto; is short for margin: 0 auto 0 auto;

layout centered

And the layout is centered. Now to make it aligned to the right, we just have to change those values added earlier:

#container {
	background: url(images/bg.gif) repeat-y;
	width: 755px;
	margin: 0 0 0 auto;
}
layout aligned right

The neat details

You've made a basic template. Now it's time to do what you usually do with CSS, stylize the bits and pieces of the design - add padding, colors, borders, backgrounds... My styling always starts with one essential line:

* {margin: 0; padding: 0; border: none;}

This is the universal selector - the style will apply to all elements on the page, unless stated otherwise. Since I want to have the full control over all margins, padding and borders, I will adjust them manually for each element - by default, they will all be reset to 0.

Taking care of the details sometimes takes as much time as drawing the design and coding. Don't be discouraged, though. It's well worth it. By making the pretty details, you actually show to the visitors that you care. They might not notice it at all, but they would notice if it wasn't right, I assure you.

After the makeover, my layout looks like this (click on the image to see it in full size):

final version of layout

I hope you benefited from this tutorial. I did, because I have one more layout in my free downloads section. When you master these essentials of positioning, you will be able to code all kinds of tableless layouts with ease.


Share this tutorial with your friends!


Hostgator

Sign up NOW to get a BONUS brush set into your inbox!

You will also get notified when I add new free downloads. I won't spam you, I promise!

Facebook

Friends

Copyright © 2004-2014 , all rights reserved.