3 column with full length columns

This 3 column layout was used by my own for a website which I created about 4 years ago. The origin of the code however is unknown to me.

This one has the most complicated code. It uses two wrapper to apply a background image to the right and left side. a general container and two adjusting divs for setting boundary margins for the main div.

It however has the strange effect that the right side background is overlaying the right column in firefox, which I do not understand.

View the Layout

CSS code

HTML code

<!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>
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;
}