Three Column Layout

Capo64 · 04-16-2008, 05:28 PM

Hi,

I've always used tables as my layout, and I can't seem to understand why everyone loves these CSS layouts so much, but I figure I might as well try it out.

Anyone know of the *perfect* three column CSS layout?

I'm looking for:

Simple.
Fluid Middle.
All Columns equal height no matter which is the longest.
Header & Footer.
Cross-browser.
Validates & No CSS Hacks.

I've been looking around for a good one, and so far I haven't found one that appeals to me.

Why aren't these as easy as tables, and why does everyone love them so much?

Thanks :}

unr · 04-16-2008, 05:41 PM

Tables are far too restrictive, you can do almost anything with divs.
Though, I agree I can also do almost anything with tables.
It just takes more work.

-- can't help you find what you're looking for,
But hope that explains why people love divs.

htmlbasictutor · 04-16-2008, 06:00 PM

Some suggestions (but I haven't checked them all out that they meet your criteria)

3-Column CSS Layouts: Search Engine Friendly Layouts

Three column CSS layout - left and right menu

Capo64 · 04-16-2008, 06:44 PM

Hey, Thanks for the replies,

The first one requires JavaScript (shoulda said i didn't want that either).

I do like the second one (it links to a fluid example), but I'm still trying to figure out exactly how this works, might use that one though.

One of the coolest ones I found was from CSS Play:
http://www.cssplay.co.uk/layouts/3cols.htm

But I think I'd rather have separate div's for the left middle and right with their own backgrounds (writing in the borders just feels weird).

I know I'm being picky, but I want a really good layout that I know exactly what's going on before I get stuck with some mess that I don't want to work with.

I'm still open to suggestions. Anyone else? Thanks so far.

Also,

What exactly can you do with divs that you can't do with tables?

jump · 04-22-2008, 04:38 PM

Quote:

Originally Posted by Capo64

I'm still open to suggestions. Anyone else? Thanks so far.

There is several Free fluid full height CSS layouts here:
http://maxdesign.com.au/presentation/page_layouts/

Capo64 · 04-23-2008, 07:50 AM

Thanks for the link. After all my searching I still don't see how CSS layouts are so much better, and I think I'm just gonna use a table layout.

So much less complicated and does everything CSS does (I think).

jump · 04-23-2008, 05:59 PM

Quote:

Originally Posted by Capo64

Thanks for the link. After all my searching I still don't see how CSS layouts are so much better, and I think I'm just gonna use a table layout.

So much less complicated and does everything CSS does (I think).

I also only used only tables in the beginning. I sometimes still do, but I always use CSS to style the tables instead of just HTML.

For example, you can create a 3 col table layout with a header/footer and set all the sizes, colors etc with an external stylesheet.

Example:

HTML Code:

<html>
<head>
	<title>3 Col CSS Table Layout with Header and Footer</title>
	<!-- Path To Your External Stylesheet -->
	<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
	<!-- / Path To Your External Stylesheet -->
</head>
<body>
	<!-- Table -->
	<table id="main-table" align="center" cellspacing="0" cellpadding="0">
		<tr>
			<td id="header" colspan="3">
				Header
			</td>
		</tr>
		<tr>
			<td id="left-nav" vAlign="top">
				Left Nav Links
			</td>
			<td id="main-content-area" vAlign="top">
				<h1>
					Main Content Area
				</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. 
				</p>
			</td>
			<td id="right-nav" vAlign="top">
				Right Nav Links
			</td>
		</tr>
		<tr>
			<td id="footer" colspan="3">
				Footer
			</td>
		</tr>
	</table>
	<!-- / Table -->
</body>
</html>

1. Use PHP or SSI includes for:
- Header
- Left Nav
- Right Nav
- Footer

2. Add style rules to each id attribute into the external stylesheet (style.css).

Example:

Code:

	body {
		margin: 1em
		}
		
	td {
		font-family: verdana, tahoma, sans-serif;
		font-size: 80%;
		}
		
	table#main-table {
		width: 750px;
		}
		
	td#header {
		height: 120px;
		background-color: #35005A;
		padding: 10px;
		color: #AC7CCF;
		}
		
	td#left-nav {
		width: 130px;
		background-color: #35005A;
		padding: 10px;
		color: #AC7CCF;
		}
		
	td#main-content-area {
		padding: 10px;
		line-height: 160%;
		}
		
	td#right-nav {
		width: 130px;
		background-color: #AC7CCF;
		padding: 10px;
		}
		
	td#footer {
		background-color: #AC7CCF;
		padding: 10px;
		text-align: center;
		font-size: 11px;
		color: #35005A;
		}

This provides much more flexibility because you can change the appearance of hundreds of web pages by changing just one file (the stylesheet). More info here: http://www.htmlhelp.com/reference/css/

When combined with PHP or SSI includes, CSS is the way to fly.

Even though it's bit slow when started out with this, it *is* worth it because of all the time saved later. It gets easier the more you do it.

barsa · 05-26-2008, 11:13 PM

here is a tutorial, about how to create 3 column layout.
http://www.webdesign.org/web/html-an...yout.9088.html

jtaporco · 06-10-2008, 10:15 AM

what's the difference between fixed & liquid layouts?

htmlbasictutor · 06-10-2008, 10:30 AM

Quote:

Originally Posted by jtaporco

what's the difference between fixed & liquid layouts?

A fixed layout you set the width to a fixed width. e.g. 800 px. This will not adjust to the visitor's screen resolution therefore, if you chose to use say, 1000px, then a visitor with their screen resolution set smaller than 1024 x 768 or with their browser window not maximized will see a horizontal scroll bar at the bottom of the window.

With a liquid (or fluid) design the width of your design adjusts to the screen resolution of the user and/or the width of their browser window. As long as a single image or images forced to be side by side add up to less than the available viewable area available in the browser window, there will be no scroll bar.

jtaporco · 06-10-2008, 10:35 AM

nice! thanks htmlbasictutor!