Hi all,

Sorry if this question is answered elsewhere, I have been trolling trough this forum for hours and found lots of great stuff but I can't seem to fix the problems below:

I have created a 3 column layout (wish i'd used Paul's now ) but I can't seem to get the height right:

IE6: (non-quirks mode) the height is 100% of the view port plus the height of the header div. - Yuk

Mozilla: height looks good but if the content is short the footer is right up underneath the content. -Yuk again

Code is posted below:
(please be kind - i'm self taught)

Code:
/* <![CDATA[ */

/*	body {
		margin:0; padding:0;
		font:11pt/1.5 sans-serif;
		}*/
a,p,li,h3,table,body
{
font: 12px verdana, arial, 'sans serif'; 
}
html, body {height: 100%;}

body {
	text-align:center;
	/*min-width:760px;*/
	line-height:100%;
	/* \*/
	/*background:url(images/back.gif) repeat-y #FFF left top;*/
	color: #000000;
	margin: 0;
	padding: 0;
	background-color: #edf3cb;
}
	#expander {
		float: left;
		width: 1px;
		height: 100%;
		background-color: red;
		min-height: 100%;
		}
	#container {
		z-index: 12;
		width:760px;
		margin:0; padding:0;
		background-color: white;
		margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; /* For Moz */
		background-image: url(../images/bodyback.gif);
		background-repeat: repeat-y;
		height:100%;
		min-height:100%;
		}
html>body #container {height: auto;}	
	#intro {
		display: none;
		z-index: 1;
		color: black;
		position: absolute;
		top: 30px;
		left: 200px;
		width: 300px;
		background-color: red;
	}
	#header {
		z-index: 10;
		margin:0; 
		padding:0;
		background-image: url(../images/bantop.jpg);
		text-align: left;
		width: 100%;
		height: 138px;
		/*position: fixed;*/
		}
		#logot {
			display: none;
			margin:0; padding:0;
			background-image: url(../images/logol.gif);
			width: 134px;
			height: 52px;
			z-index: 30;
			float: left;
		}
		#transrgt
		{
			display: none;
			/*background-image: url(images/transleft.gif);*/
		}
		#transleft
		{
			display: none;
		}
		#transtop
		{
			display: none;
		}
		#transbot
		{
			display: none;
			/*background-image: url(images/transbot.gif);*/
		}
		#logom {
			display: none;
			margin:0; padding:0;
			background-image: url(../images/middle.gif);
			width: 116px;
			height: 89px;
			z-index: 50;
		margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; /* For Moz */
		}
		#logor {
			display: none;
			margin:0; padding:0;
			background-image: url(../images/logor.gif);
			width: 92px;
			height: 52px;
			z-index: 30;
			float: right;
		}
	#main1 {
		margin:0; padding:0;
		z-index: 12;
		height:100%;
		min-height:100%;
		}
html>body container #main1{height: auto;}		
	#main2 {
		margin:0; padding:0;
		background:url("blue.gif") top right repeat-y;
		height:100%;
		min-height:100%;
		}
	#left {
		float:left;
		background-image: url(../images/banlft.gif);
		background-repeat: repeat-y;
		width:0px;
		margin:30; 
		padding:0;
		font-size:80%;
		}
	#right {
		float:right;
		width:0px;
		margin:30; padding:0;
		font-size:80%;
		}
	#middle {
		margin:0px 30px 0px 30px; /* top right bottom left */
		font-size:80%;
		padding: 0;
		height:100%;
		min-height:100%;
		}
	#mccont {
		padding:0px 0px 0px 3px;
		text-align: left;
		height:100%;
		min-height:100%;
	}
/* Fix IE. Hide from IE Mac \*/
* html #mccont ul li { float: none;  }
* html #mccont ul li a { }
/* End */

#mccont li {
		list-style-type: disc;
	}

	#mccont ul {
		list-style-type: disc;
	}
		* html #mccont { margin-top: 0; }
	.column-in {
		margin:0px;
		padding:0px;
		}
	.cleaner {
		clear:both;
		height:1px;
		font-size:1px;
		border:none;
		margin:0; padding:0;
		background:transparent;
		}
	/* * html .cleaner{display:none}  STOPS CLEANER FROR IE */
	h1,h2,h3,h4 { margin: 0.2em 0 }
	p { margin: 0em 0 }
	a { color:black }
	
	.copy { text-align:center; font-size:80% }
	
		#menu
		{	position: relative;
			margin: 0;
			padding: 0;
			left: 0px;
			top: 65px;
			font-size: 90%;
			text-align: center;
			z-index: 99;
		}/* first line of hack is border + margin? +padding for IE5x, the bottom line is the actual width */
		#menu
		{
			width: 100%; 
			voice-family: "\"}\""; 
			voice-family:inherit;
			width:100%;
		}
		/* Be nice to opera - should be the same as IE6-moz value above*/
		html>body #menu
		{
			width:100%;
		}
		
		#footer
		{	clear:both;
			background-image: url(../images/banbot.gif);
			text-align: center;
			color:#fee900;
			height: 26px;
		}
/* ]]> */
Please let me know if this is enough/too much, any help would be greatly appreciated.

Cheers,

Therese