3 column (intensivstation.ch)

This 3 column layout is based on the example from intensivstation.ch

It used the following trick to generate the background for the columns

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" >
	<title>Matthias Pospiech</title>
	<link  rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="pagewidth">
	<div id="header">Header</div>
	<div id="leftside_wrapper">
		<div id="rightside_wrapper">
			<div id="container">
				<div id="adjust_right">		
					<div id="left_sidebar">
						<h2>Left Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
						<span style="clear:right">&nbsp;</span>
					</div>
					<div id="adjust_left">
						<div id="youarehere">
							Breadcrump
							<span style="clear:right">&nbsp;</span>
						</div>
						<div id="main_content">
							<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
							<span style="clear:right">&nbsp;</span>
						</div>
					</div>
				</div>
			</div>			
		</div>
		<div id="right_sidebar">
			<h2>Right Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
		</div>
		<div class="clearing">&nbsp;</div>
	</div>
	<div id="footer">Footer</div>
</div>
</body>
</html>

It however has the drawback the color is discontinued if the length of the right of left side exceedes the middle part.

View the Layout

CSS code

HTML code

html, body {margin: 0;	padding: 0;}
 
/* various variants of the css clear command used */
.clear {clear: both;margin: 0;	padding: 0; }
.clr {clear:both;}
.clearing {height: 0;clear: both;}
 
 
/* Layout and principal structure of the Website */
/* ============================================= */
 
 
/* Principal of Wrappers: 
   They have the length of the inside div's. When adding a 
	background image to the wrapper it will be behind all 
	the actual content inside*/
 
 
#pagewidth {
	width:1000px;
	min-width:500px;
}
 
/* LEFT side Wrapper*/
#leftside_wrapper {
	/* Background color set background for content !! */	
	background: #f0f url("images/sidebarleft.png") repeat-y left;	
}
/* RIGHT side Wrapper*/
#rightside_wrapper {
	/* ONLY for RIGHT column !! */
	background: url("images/sidebarright.png") repeat-y right;
}
 
#container {
	width: 100%;
	float: left;
	margin-right: -200px;
	/* ONLY for RIGHT column !! */
	/* To fix a bug in Internet Explorer, we also need to 
		add the same background to our container div.*/
	background: url("images/sidebarright.png") repeat-y right;
}
 
/* keeps the content away from the right side (where a sidebar is)*/
#adjust_right {
	/* To fix a bug in Internet Explorer, we also need to 
		add the same background to our container div.*/
	background: url("images/sidebarleft.png") repeat-y left;
	/* ONLY for RIGHT column !! */	
	margin-right: 205px;
	/* ONLY for __NO__ RIGHT column !! */	
	/*margin-right: 0px;*/
 
}
/* only sets margin for the main part */
#adjust_left {
	margin-left: 210px;
	/* ONLY for _NO_ LEFT column */
	/*margin-left: 10px;*/
}
 
 
#left_sidebar {
	width: 200px; /*Size of image*/
	float: left;
 	padding: 0;
}
#right_sidebar {
	background: #0f0;
	width: 195px; 
	padding-right: 5px;
	float: right;
}
 
#main_content { /*TRBL*/
	margin: 0px 5px 5px 0px; /*distance to outer border */
}
 
#header {
 height: 70px;
}
 
#footer{  
 padding:0;
 margin: 0px 0 0 0;
 width:100%;
} 
 
.contentarea {
  float: left;
  width: 40em;
  padding: 0 20px 10px 0;
}
 
/* -- The Colors ------------------------------------------*/
 
#pagewidth {
	background-color : #fff;
	color: #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
 
#header {
 color: #fff;
 background-color: #7D9EC0;
}
 
#left_sidebar {
 	color: #72502f; /* Text color for  left column */
 	/*background-color: #F7F1DF;*/
}
#right_sidebar {
 	color: #12502f; /* Text color for  left column */
 	/*background-color: #A7F1DF;*/
}
 
#footer{ 
 border-top: 1px solid #234863;
 color: #7F7F7F;
 background-color: #faf;  /* BODY background color */
 font-size: 100%;
 text-align: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Selectutorial - Selectors in action - Step 22</title>
	<link  rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
	<div id="banner">
		<h1>Site name</h1>	
	</div>
	<div id="container">
		<div id="container2">
			<div id="navigation">
				<h2>Left Sidebar</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.</p>
			</div>
			<div id="more">
				<h2>Right Sidebar</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. </p>
			</div>
			<div id="content">
				<h2>Heading here</h2>
				<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="cleardiv"></div>
		</div>
	</div>
	<div id="footer">
		Footer
	</div>
</body>
</html>