div clearing problem

Looking for some help! I have a footer with clear:both applied (didn't quite work) so I put in a div with a class of clear:both right before. Great in ff, ie mac. But ie pc gives the clearing div a height. Tried some fixes, can't get it to go away! Here's the code:

<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html {
background-color:#9ec1a0;
}
body {
font-size: 76%;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:center; /*centered in ie*/
color:#000;
background-color:#9ec1a0;
}
/*layout items*/
#logo {
height:100px;
width:56em;
margin: 0 auto;
}
.clear {
clear:both;
}
#wrapper { /*keep layout tidy*/
width:56em;
margin: 0 auto;
text-align:left;/*puts text back properly*/
border:1px solid #999;
background-color:#e6e6e6;
}
#maincontent {
background-color:#fff;
float:left;
width:37em;
}
#supcontent {
float:right;
width:18.8em;
}
#footer {
clear:both;
background-color:#00a14e ;
overflow:hidden;
height:80px;
}
/* supplemental navigation controls */
#logosupnav {
float:right;
padding-top:79px;/*must be padding to work in ie */
text-align:right;
width:25em;
display:inline;
}
#logosupnav ul {
list-style:none;
padding:0;
margin:0;
}
#logosupnav li {
display:inline;
margin:0 0 .5em 2.1em;
font-size:.95em;
font-weight:normal;
}
/*typography*/
h1, h2, h3, h4, h5, h6, p, ul, li {
margin:0 16px; /*pixels here so all are the same */
}  /*ems change based on text size */
#supcontent h3, #supcontent p {
margin:.5em 16px 0; /* ems for vertical are good cause look proportionate */
}
h1 {
font-size: 1.7em;
font-weight: bold;
margin-top: .75em;
}
h3 {
font-size: 1.2em;
font-weight: normal;
color:#00a14e;
}
img, img a {
border: 0;
margin:0;
padding:0;
}
#maincontent img {
margin-left:16px;
}
p {
font-size: 1.0em;
line-height: 1.7em;
margin-top:1em;
margin-bottom:1em;
}
#footer p {
color:#fff;
font-size:.9em;
padding:.5em;
}
.right { /* used in footer for each image */
float:right;
padding-left:12px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
 <div id="maincontent">
 <h1>heading 1</h1>
 <p>text </p>
 </div>
 <!--end main -->
<div id="supcontent">
 <h3>sub</h3>
</div>
<!--end supcontent -->
 <div class="clear"></div>
<div id="footer">
<p><img src="../images/q1.gif" width="39" height="50" class="right" />
 &copy;company<br /> 
 address</p>
 </div><!--end footer -->
</div>
</body>
</html>

div clearing problem

want clear, no height

sldesigns

drhowarddrfine

sldesigns

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week