I have a three column layout, you can look at it by clicking here

However, I have a problem with the left and right hand columns not being long enough to encompas the middle section, especially on the products page.

At the moment I have the column heights set to 600px, but want them to automatically size to accommodate any length of content in the middle section.

Here is my css...

Code:
/* re-define standard tags */

body {
	margin: 0;
	padding: 0;
	font-family: Georgia, Arial, Verdana, sans-serif;
}

a {
	text-decoration: none;
	border-bottom: 1px dotted;
	color: #293E53;
}

a:hover {
	text-decoration: none !important;
	border-bottom: 1px solid;
	color: #FF3300;
}

a:visited {
	text-decoration: none;
	border-bottom: 1px dotted;
	color: #595950;
}

/*redifine each ul for coloured boxes */

.bullet_orange{
	list-style: disc url(../images/bullet_orange.gif);
}

.bullet_green{
	list-style: disc url(../images/bullet_green.gif);
}

.bullet_red {
	list-style: disc url(../images/bullet_red.gif);
}

.bullet_brown {
	list-style: disc url(../images/bullet_brown.gif);
}

.bullet_blue {
	list-style: disc url(../images/bullet_blue.gif);
}

/* #wrap */
div#wrap {
	position: relative;
	width: 746px;
	margin: 15px auto;
}


div#header {
	border-right: 6px solid #660000;
	width: 740px;
	height: 142px;
	float: left;
	margin: 0px;
	padding-bottom: 6px;
	padding: 0px;
	border-top: 1px solid #4D4D45;
}

div#footer {
	border-right: 6px solid #660000;
	width: 740px;
	height: 42px;
	float: left;
	margin: 0px;
	padding-top: 6px;
	padding: 0px;
	border-bottom: 1px solid #4D4D45;
	background-color: #fcfcfc;
}

div#footer p {
	font-size: 10px;
	line-height: 16px;
	color: #333333;
}

div#left {
	float: left;
	width: 159px;
	height: 600px;
	margin: 0px;
	padding: 0px;
	padding-top: 10px;
	border-right: 1px dotted #CCCCCC;
	left: 0px;
	top: 6px;
}

div#main {
	float: left;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;	
	width: 440px;
	height: 600px;	
	left: 160px;
	top: 6px;
}

div#main p {
	font-size: 11px;
	line-height: 16px;
	color: #333333;
}

div#right {
	border-right: 6px solid #660000;
	border-left: 1px dotted #CCCCCC;
	float: left;
	padding: 5px;
/* if width is 120px, minus padding left+right (5+5px) */	
	width: 109px;
/* if height is 400px, minus padding top+bottom (250px+5px) */	
	height: 600px;	
	font-size: 9px;
	vertical-align: 100%;
}

div#main h1 {
	font-family: Georgia, Arial, verdana, sans-serif;
	font-size: 16px;
	color: #494975;
}

/* Style for product boxes etc... */

div#thumbcontainer {
  border: 1px dotted #CCCCCC;
  background-color: #fcfcfc;
}

div#thumbspacer {
	clear: both;
}

div#thumbs {
  float: left;
  padding-left: 25px;
}
  
div#thumbs p {
   text-align: left;
}

div#thumbcontainer h1 {
	font-family: Georgia, Arial, verdana, sans-serif;
	font-size: 14px;
	color: #494975;
	padding-left: 15px;
}
Anyone know how to do this?

Also, I would like to align the content of the right hand column to the bottom, any ideas on this?

I've been told that Sitepoint users are the most intelligent on the internet, so surly someone must have an answer!

Cheers guys.

Jon.