Another IE6 issue

[AdRock952]

I found a 3 column layout which is content first and i wanted to make it centered with a fixed width. That wasn't the problem but what happens is the position of the footer.

The footer in FF and IE7 is not at the bottom of the screen underneath the left and right column and in IE6 is near the top.

I added min-height: 100% and height: auto to the wrapper and it seemed to work for FF and IE7 but not IE6.

Also the 2 columns don't have full color in them in IE6.

Is there a way of fixing these issues? http://www.jackgodfrey.org.uk/adam/jack/links.php

Here is the layout.css

* {margin:0; padding:0;}
 
html, body {
	margin: 0; 
	padding: 0;
	height: 100%;
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 100%;
	text-align: center;
}
 
#wrapper {
	position: relative;
	width: 990px;
	min-width: 600px; /* to allow room for images and long words */
	margin: 0 auto;
	border: 1px solid black;
	background: #fff; /* light grey */
	min-height: 80%;
	text-align: left;
}
 
#header, #footer {
	position: relative;
	width: 990px;
	min-width: 600px; /* to match wrapper div */
	margin: 0 auto;
	border: 1px solid #000;
}
 
#footer {
	height: 50px;
	background: #ffc url(../images/layout/footerbar.gif) repeat-x; /* pale yellow */
}
 
#header {
	height:30px;
	background: #ffc url(../images/layout/bar.gif) repeat-x; /* pale yellow */
}
 
#left, #right {
	position: absolute;
	top: 0;
	bottom: 0; /* Opera needs this! Moz would automatically assume this as default*/
	border-width: 0px; /* widths below */
	border-style: solid;
	border-color: #777;
	padding: 5px;
}
 
#left {
	left: 0; 
	width: 200px; 
	background: #3379d9; 
	border-right-width: 2px;
}
 
#right {
	right: 0; 
	width: 200px; 
	background: #3379d9; 
	border-left-width: 2px;
}
 
/* bringing the center content into position (clear the sides)
   using a wrapper div to avoid possible IE Box Model issues
	 would also allow for extra background styling if required
*/
 
#contentwrap {
	position: relative; 
	padding: 0 210px 0 210px;
}
 
#content {
	position: relative;  /* to enable further positioned divs inside content area */
	z-index: 100; /* to make sure if long words overflow they show above the right column */ 
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	background: #fff;
	padding: 0px 0 19px 0;
	margin: 0;
}
 
/***** General formatting ****/
 /* tanfa logo/link */
#pagetop {
	margin:0 auto;
	width: 990px;
	height: 200px;
	border: 1px solid #000;
}
 
#logos {
   width: 200px;
   position: absolute;
   top: 10px;
   left: 0;
}
 
#logos img {
   border: none;
   padding-right: 5px;
}
 
 
#copy {
   width: 585px;
   position: absolute;
   top: 10px;
   left: 200px;
}
 
#inner {
    padding: 10px;
}

and a fix that came with the original page

    <!--[if IE]>
     <style type="text/css" media="screen">
	/* IE Workaround for peekaboo bug */
	#content {height: 1%;} 
	/* use expression to get the height from the contentwrap div */
	#apbg1, #apbg2 {height:expression(contentwrap.offsetHeight + "px");}
    </style>
     <![endif]-->

[Rhysickle]

As far as I know, there isn't really a way of getting the footer to clear the main content columns using absolute positioning (unless you're prepared to use javascript) - you have to use floated positioining.

This site is a good example of how to do it: http://www.yaml.de/en/documentation/...optimized.html

One thing the article doesn't really cover is that in ie6 you need to give the columns half the left and right margin due to a bug.

To do this you would need to use an ie6 filter e.g

#left {float:left; width:200px; margin-right:20px;}
* html #left {margin-right:10px;}