I really want to convert a site of mine to a CSS based layout. This site uses tables for pretty much all the layout. Like I said, I want to start using CSS layout.

I'm kinda nervous since this site is live, and I don't want to break it. What I need is a simple 3 column layout with fixed widths. I have read a lot of posts and followed a lot of links posted in this forum. There are a lot of ways to layout a site with CSS. But which is the easiest? Which will cause the least amount of pain? Is there one CSS layout method that just works, and one that you would just use without hesitation?

it's not a difficult layout I think you'll be pleasantly surprised. You're really not looking at long at all to redesign this site but if you are worried about doing it with a live site the solution really isn't that difficult just copy everything to a subfolder named "redesign" copy all the files and start updating it there when it's all done and you've tested it then move it over

Looks like all you need to reproduce that is a 2-column layout anyway, which is much easier, especially as a fixed width.

From the current site, you'd have;

header
left column (menu)
right column (content)
footer

Not too hard to do really. You might want to browse these CSS templates (free) and find one that is laid out the way you want yours to be and adapt it.

http://www.openwebdesign.org/browse.php

I worked up something that might work. I works great in FF 2 and IE 6, and it is laid out exactly how I want it. My CSS validates (except for a few warnings which I will take care of later). I just want to make sure my code looks OK. Does anyone see anything wrong with this? I'll list the CSS below, and here is the link to the page: http://tmwebworks.com/template.php

body {
	background: #CCD8E0;
	color: #444;
	margin: 0;
	padding: 0;
}

/* A div to wrap everything up */
.container {
	background: white url(images/dotline.gif) top right repeat-y;
	width: 930px;
	padding: 0 10px 0 10px;
}

/* The main content div */
.content {
	float: left;
	width: 520px;
	margin: 0 40px 0 20px;
	background: #CCC;
}

/* Div to hold the sites main navigation */
.leftnav {
	float: left;
	width: 200px;
	padding: 0 0 20px 0;
	background: white url(images/menu_bg_new2.gif) bottom center no-repeat;
}

/* A column to add secondary links or announcements */
.rightnav {
	float: left;
	width: 150px;
	background: #F00;
}

/* Footer to hold copyright info */
.footer {
	background: blue;
	color: white;
	text-align: left;
	width: 520px;
	margin: 10px 0 10px 220px;
}

/* Used to keep the divs wrapped up in the container */
.clearer {clear: both;}

The best site i found out how to make a css layout is " http://www.maxdesign.com.au/presentation/page_layouts/ ", its totally a good site, it explains it, and shows you what it does. you cant find tutorials like these tbh.

If your having trouble redesigning the website i would like to take it on as practise as i am learning css too , no cost for doing it. and id like to put it in my portfolio. PM me if your interested.

Here is what I came up with. It works and does what I want it too. Just want to make sure this is OK. Here is the page at tmwebworks.com, and the CSS below:

body {
	background: #FFF;
	color: #000;
	margin: 0;
	padding: 0;
}
/* A div to wrap everything up */
.container {
	background: inherit;
	color: inherit;
	width: 930px;
	padding: 0 10px 0 10px;
}
/* The main content div */
.content {
	float: left;
	width: 520px;
	margin: 0 20px 0 20px;
	background: #CCC;
	color: inherit;
}
/* Div to hold the sites main navigation */
.leftnav {
	float: left;
	width: 200px;
	padding: 0 0 20px 0;
	background: #FFF url(images/menu_bg_new2.gif) bottom center no-repeat;
	color: inherit;
}
/* A column to add secondary links or announcements */
.rightnav {
	float: left;
	width: 160px;
	background: inherit;
	color: inherit;
	border: 1px solid #CCC;
}
/* Footer to hold copyright info */
.footer {
	background: blue;
	color: white;
	text-align: left;
	width: 520px;
	margin: 10px 0 10px 220px;
}
/* Used to keep the divs wrapped up in the container */
.clearer {clear: both;}

well the only thing I think is a little weird about it is that you're floating all 3 containers it would usually be done by floating the left nave float: left; the right nav float:right; and the content to just be left without any floating but the way you're doing it still works so no problem..

I will try that method also. Thanks for the tip!