Columns equal height using -ve margins not working correctly in IE6

Ok here is the problem

I have a 2 column layout
Header is at top
Main div encompasses content and sidebar
Content is to the left
Sidebar is to the right
Footer is at the bottom

I need the content and sidebar to be the same height, to achieve this i used the negative margin, positive padding hack, and it works fine in all browsers except IE6

The Main Div has a bottom border that is 5 PXs thick
The Sidebar has a left border that is 5 pixels wide

In all browsers except IE6 the sidebar border runs down the side of the page until it meets the Bottom Border of the main div which is above the footer, however in IE6 the sidebar border runs to the bottom of the page straight through the footer and the bottom border of the main div doesn't appear at all


p { 
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
#container 
{
margin:0 auto;
min-width: 750px;
 /*_width: expression(document.body.clientWidth < 752? "750px" : "auto"); hack for old IE -- need to test */
color: #000;
width: 70%;
position: relative;
}
#main {
overflow:hidden; /**/
border-bottom:5px solid #000000;
padding-bottom:15px;
position: relative;
}
/* Main Body starts */
#content {
color: #000;
width: 66%;
float: left;
font-family:Arial,Tahoma,Helvetica,sans-serif;

margin-bottom: -2000px;
padding-bottom: 2000px;
/* overflow:hidden;*/
}
#sidebar {
margin: 0;
padding: 0 0 2000 0;
width: 30%;
float:right;
margin-right: 0;
font-family:Verdana,Geneva,sans-serif;
font-size: 14px;
color:000;
margin-bottom: -2000px;
padding-bottom: 2000px;
border-left:5px solid #bbb;

}
/* Footer Section */
#footer {
 clear: both;
 text-align: center;
font-family:Verdana,Geneva,sans-serif;
font-size: 10px;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>test site</title>
 <link href="ihatecss9.9.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="wrapper">
 <div id="container">
  <div id="header">
 </div><!-- end header -->
 <div id="breadcrumbs">
 You are here: Home
</div>
<div id="main">
 <div id="content">
 Put some content here
 </div>
<!-- end content -->
<div id="sidebar">
<div class="bar">
</div>
<div class="cont"><br><br><br>
</div>
 </div><!-- end sidebar -->

 </div><!-- end Main -->

<div id="footer">
<p>hello this is the footer
</p>
<p>
</p>

</div><!-- end footer -->
  </div><!-- end container -->
</div> <!-- END WRAPPER -->
</body>
</html>

I do have a demo page, but as we are not allowed to post links, I obviously can't show you, sohopefully the code above will help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test site</title> <link href="ihatecss9.9.css" rel="stylesheet" type="text/css" /> [blue]  [/blue] </head> <body> ... ... ... </body> </html>

Columns equal height using -ve margins not working correctly in IE6

column border runs to bottom of page straight through the footer

nigelt74

birdbrain

nigelt74

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week