Footer Trouble - 3column CSS Layout

[blondy]

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)

/* <![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

[Paul O'B]

Hi,

I will need the html as well to see how you are placing all that css.

If you look in the FAQ thread you will see two posts that will help you understand the 100% height and footer techniques.

Basically 100% is 100% and that means that if you place it under your header then it is 100% from where it starts. Which is why in my demos the headers are absolutely placed so that they take up no space and the 100% starts at the top of the window. (I have worked out a way to have fluid headers in my demos but thats another question).

If you post your html then I'll see if I can give you some pointers and aim you in the right direction

Paul