3 column fixed, header & footer not working in IE6

I would be most appreciative if someone could assist with making this site display properly in IE6.

http://www.homelink.je/NewSite/

For some reason the centre column (#mainContent) appears below the left sideBar.

I have tried adding an [if IE 6] and redirected to a new style sheet, but I am still not sure what is causing the problem.

Here is the coding:

CSS


/*@charset "UTF-8";
/* CSS Document */

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

body  {
	font: 100% Century Gothic, Arial, Helvetica, sans-serif;
	background: #000;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
#container { 
	width: 780px;  
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
} 
#header { 
	background: #fff; 
	/*padding: 0 10px 0 20px;*/
	margin:0;
} 

/*
#banner { 
	background-image:url(../images/JerseyBeachHouse.jpg);
	background-repeat:no-repeat;
}
*/

#header h1 {
	margin: 0; 
	padding: 10px 0; 
}

#header p {
	font-size:16px;
	line-height:18px;
	color:#03C;	
}



#header img {
	margin: 0;  
}

#sidebar1 {
	float: left; 
	width: 130px; 
	background: #fff; 
	padding: 0px 0px 15px 0px;
	margin:5px 0;
}
#sidebar2 {
	float: right; 
	width: 150px;  
	padding: 0px 0px;
	margin:0px 0;
}

#sidebar2a {  
	background: #4f8abe;
	padding: 5px 10px 15px 5px;
	margin:12px 0;
}

#sidebar2b {  
	padding: 5px 10px 15px 10px;
	margin:12px 0;
}

#mainContent { 
	margin: 0px 160px 5px 150px; 
	padding: 0 0px;
	width:420px;
} 
#footer { 
	padding: 0 10px 0 20px; 
	background:#fff;
	border-top: 2px solid #000000;
} 

#Agents {
	padding: 0px 5px;
	}
	
#featuredAgent {
	padding: 0px 5px;
	}
	
#search {
	padding: 0px 5px;
	}

.thrColFixHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
}
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


/*//////// FONTS ////////////*/

#sidebar1 .topLevelNav {
	font-size:12px;
	color:#666;
	text-align:right;
	line-height:20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}

#sidebar2a p {
	font-size:11px;
	color:#fff;
	text-align:right;
}

#sidebar2b p {
	font-size:11px;
	color:#666;
	text-align:right;
}

#sidebar2b h4 {
	font-size:12px;
	color:#005398;
	text-align:right;
}

#mainContent h1 {
	font-size:18px;
	font-weight:lighter;
	color:#005398;
	display:block;
	width: 420px;
	background-color:#e2e8f3;
	padding:5px;
}

#mainContent h2 {
	font-size:14px;
	font-weight:lighter;
	color:#005398;
	display:block;
	width: 420px;
	background-color:#e2e8f3;
	padding:5px;
}

#mainContent h3 {
	font-size:12px;
	font-weight:lighter;
	color:#005398;
	margin:20px 0px 3px 0px;
}

#mainContent h4 {
	font-size:14px;
	font-weight:bold;
	color:#005398;
	margin:5px 0px 15px 0px;
	}

#banner p {
	font-size:16px;
	color:#fff;
	text-align:right;
	letter-spacing:0.05em;
	padding:150px 10px 10px 0px;
	margin:0;
}

.urlFooter {
	font-size:11px;
	color:#000;
	margin:35px 0;
}

.officeList {
	font-size:10px; 
	color:#4f8abe;
	letter-spacing: 0.12em;
	margin:20px 0;
}

.copy {
	font-size:12px;
	line-height:18px;
	color:#333;
	margin: 0px 0px 15px 0px;
}

.names {
	font-size:16px;
	color:#4f8abe;
	margin: 0px 0px 2px 0px;
}

.subTitle {
	font-size:14px;
	color:#333;
	margin: 2px 0px 4px 0px;
}

.smlGreyLink {
	font-size:11px;
	margin-left: 50px;
	color:#666;
}

.bulletTitle {
	font-size:12px;
	font-weight:bold;
	line-height:18px;
	color:#4f8abe;
	margin: 15px 0px 5px 0px;
	list-style: none;
}

.smlText {
	font-size:10px;
	color:#666;
	margin: 0px;
}

/*// Footer Divider Bars //*/

.dividerBar {
	margin:0px 15px;
}

/*///// LINKS /////////*/

a.mainNav:link {color: #666; text-decoration: none; padding:3px 0px 3px 0px; display:block; width:130px;}
a.mainNav:visited {color: #666; text-decoration: none; padding:3px 0px 3px 0px; display:block; width:130px;}
a.mainNav:hover {color: #666; text-decoration: none; padding:3px 0px 3px 0px; display:block; width:130px;}

a.secNav:link {color: #fff; text-decoration: none; padding:3px 3px 3px 3px; display:block; width:140px;}
a.secNav:visited {color: #fff; text-decoration: none; padding:3px 3px 3px 3px; display:block; width:140px;}
a.secNav:hover {color: #005398; text-decoration: none; padding:3px 3px 3px 3px; background-color:#e2e8f3; display:block;
width:140px;}

a.emailLink:link {color: #005398; text-decoration: none;}
a.emailLink:visited {color: #005398; text-decoration: none;}
a.emailLink:hover {color: #666; text-decoration: underline;}

a.smlLink:link {color: #666; text-decoration: none;}
a.smlLink:visited {color: #666; text-decoration: none;}
a.smlLink:hover {color: #005398; text-decoration: none;}

a.footerLink:link {color: #000; text-decoration: none;}
a.footerLink:visited {color: #000; text-decoration: none;}
a.footerLink:hover {color: #4f8abe; text-decoration: none;}

a.sideBar2:link {color: #fff; text-decoration: none; padding:3px 3px 3px 3px; display:block; width:130px;}
a.sideBar2:visited {color: #fff; text-decoration: none; padding:3px 3px 3px 3px; display:block; width:130px;}
a.sideBar2:hover {color: #005398; text-decoration: none; padding:3px 3px 3px 3px; background-color:#e2e8f3; display:block;
width:140px;}


HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Homelink : Jersey Property Legal Advice : Walkers Global</title>

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

<!--[if IE 6]><style type="text/css" media="screen">@import "css/IE6.css";</style><![endif]-->


</style>
<![endif]-->

<!--[if IE 5]>
<style type="text/css"> 

#sidebar1 { width: 130px; }
#sidebar2 { width: 160px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 

#sidebar2, .thrColFixHdr #sidebar1 { padding-top: 0px; }
#mainContent { zoom: 1; }

</style>
<![endif]-->

<link href="css/mainStyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
  <div id="header"> 
  <table width="730" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="171" valign="middle"><a href="http://www.walkersglobal.com" target="_blank"><img src="images/TopLogo_WALKERS.jpg" alt="Walkers Global, Legal and Management Solutions" width="180" height="81" border="0" /></a></td>
    <td width="432" align="center" valign="middle"><p><a href="mailto:jane.needham@walkersglobal.com" class="emailLink">Email or call Jane Needham<br />
      on 700 781</a></p></td>
    <td width="147" align="right" valign="middle"><img src="images/HomeLink_logoSML.gif" width="122" height="28" alt="HomeLink" /></td>
  </tr>
</table>
  
    
<!-- end #header -->
</div>
<div id="banner">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="180">
  <param name="movie" value="flash/topBanner.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="9.0.45.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="flash/topBanner.swf" width="780" height="180">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<!-- end #banner -->
</div>

  <div id="sidebar1"><!-- #BeginLibraryItem "/library/homeNav.lbi" -->


<div id="CollapsiblePanel1" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="1">HOME BUYING</div>
  <div class="CollapsiblePanelContent"><p><a href="html/theLaw.html" class="mainNav">Can You Buy: The Law</a></p>
	<p><a href="html/search.html" class="mainNav">Property Quicksearch</a></p>
	
    <p><a href="pdf/ViewingChecklist.pdf" class="mainNav">Viewing Checklist</a></p>
    <p><a href="pdf/MovingChecklist.pdf" class="mainNav">Moving Checklist</a></p>
    <p><a href="html/homebuyerGuide.html" class="mainNav">Homebuyer's Guide</a></p>
    <p><a href="pdf/Housing_Qualifications.pdf" class="mainNav">Housing Qualifications</a></p>
    <p><a href="pdf/High_Value.pdf" class="mainNav">High Value Residents</a></p>
    <p><a href="pdf/bulletin.pdf" class="smlLink">Weekly Bulletin <br />
      The Mortgage Shop</a></p>
    </div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
  <div class="CollapsiblePanelTab" tabindex="2">HOME SELLING</div>
  <div class="CollapsiblePanelContent">
  <p><a href="html/prepareHomeSale.html" class="mainNav">Prepare Your Home<br />For Sale</a></p>
  <p><a href="html/sellingHome.html" class="mainNav">Selling Your Home</a></p>
  <p><a href="pdf/MovingChecklist.pdf" class="mainNav">Moving Checklist</a></p>
  </div>
  </div>
  
  <p class="topLevelNav"><a href="html/team.html" class="mainNav">MEET THE TEAM</a></p>
  <p class="topLevelNav"><a href="html/commercial.html" class="mainNav">COMMERCIAL PROPERTIES</a></p>
  <p class="topLevelNav"><a href="html/estateAgents.html" class="mainNav">ESTATE AGENT LINKS</a></p>
  <p class="topLevelNav"><a href="html/usefulContacts.html" class="mainNav">USEFUL CONTACTS</a></p>
  <p class="topLevelNav"><a href="html/notices.html" class="mainNav">NOTICES</a></p>
  <p class="topLevelNav"><a href="html/contact.html" class="mainNav">CONTACT US</a></p>

<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
//-->
</script><!-- #EndLibraryItem --><!-- end #sidebar1 --></div>
  <div id="sidebar2">
    <div id="sidebar2a">
    <p><a href="mortgageCalculator.html" class="sideBar2">Mortgage Calculator</a></p>
    <p><a href="stampCalculator.html" class="sideBar2">Stamp Duty Calculator</a></p>
  <!-- end #sidebar2 --></div></div>
  <div id="mainContent">
    <h1> MOVING HOME IN JERSEY</h1>
    <p class="copy">Whether you are buying or selling a property in Jersey, or just have a few questions about the process, our knowledgeable Property Group can assist with all your legal needs.</p>
    <p class="copy">Our initial advice is free and our staff are friendly and approachable, so call Jane Needham on 700 781 or email  <a href="mailto:jane.needham@walkersglobal.com" class="emailLink">jane.needham@walkersglobal.com</a> for affordable, first-rate legal advice.</p>
    
    <a href="html/search.html"><img src="images/searchIcon.gif" alt="Property Search" width="142" height="17" border="0" style="margin:15px 0px;" /></a>
    
<h2>Grasett Park - Special Offer!</h2>
    <p class="copy">If you are thinking of buying a property at Grasett Park, take advantage of our reduced legal rates.</p>
    <p class="copy">Please  call Jane Needham on
700 781 or email <a href="mailto:jane.needham@walkersglobal.com" class="emailLink">jane.needham@walkersglobal.com</a> for more details.</p>
	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  <div id="footer"> <a href="http://www.walkersglobal.com" target="_blank"><img src="images/FooterLogo_WALKERS.jpg" alt="Walkers : Global Legal and Management Services" width="180" height="29" border="0" style="float:right; margin:25px 15px 15px 0px" /></a>
    <p class="urlFooter"><a href="http://www.walkersglobal.com" target="_blank" class="footerLink">www.<strong>walkersglobal</strong>.com</a></p>
    <img src="images/officeLocations.gif" width="735" height="20" alt="British Virgin Islands, Cayman Islands, Dubai, Hong Kong, Jersey, London, Singapore" style="margin:0px 0px 15px 0px;" />
<!--
    <p class="officeList">BRITISH VIRGIN ISLANDS<span class="dividerBar">|</span>CAYMAN ISLANDS<span class="dividerBar">|</span>DUBAI<span class="dividerBar">|</span>HONG KONG<span class="dividerBar">|</span>JERSEY<span class="dividerBar">|</span>LONDON<span class="dividerBar">|</span>SINGAPORE</p>
    -->
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Thank you in advance.

IE6 has problems with floated items sitting alongside a center column with margins, so I never use that method. It works better to float the middle column as well and remove the margins. Then you just need to rearrange the divs so that they sit in the right order.

Thank you very much, will floating all the columns work fine in IE 7 & 8?

Yes, they should render the columns fine.

Indeed, it will work better. :wink: