1
Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the div above the footer for reference, and the footer itself. I have the pertinent html below the css. BTW, this is only breaking in IE!! (comments added only for this post)
Thanks!!!
/* THE BODY FOR LAYOUT CENTERING */
body {
text-align:center;
background-image: url('graphics/background.gif' );
background-repeat: repeat-x;
}
/*THE OVERALL CONTAINER */
#container {
width:765px;
margin:0px auto;
text-align:left; /* to counter the centering from above */
padding:5px;
border-top: 1px solid #c2c1ba;
border-bottom: 1px solid #c2c1ba;
background-image: url('graphics/containerback2. gif');
background-repeat: repeat-y;
}
/*THE DIV ABOVE THE FOOTER (AND ITS TWO INNER DIVS)*/
#calsvt {
width:763px;
margin:0px;
background-color: #fff;
padding-top:5px;
padding-bottom: 5px;
border:1px dashed #333;
}
#calsvtleft {
width: 350px;
padding: 0;
margin: 10px;
float:left;
border:1px dashed #000;
}
#calsvtright {
width: 350px;
padding: 0;
margin: 10px;
float:right;
border:1px dashed #000;
}
/*THE FOOTER DIV THAT WON'T ALIGN: SHOWING ABOUT 2px SHORT ON THE RIGHT SIDE!*/
#footer {
width:763px;
margin:0px;
background-color: #660000;
padding-top:5px;
border:1px dashed #333;
}
#footerleft {
width: 350px;
padding: 0;
margin: 10px;
float:left;
text-align:left;
border:1px dashed #000;
}
#footerright {
width: 350px;
padding: 0;
margin: 10px;
float:right;
text-align:right;
border:1px dashed #000;
}
THE HTML:
<body>
<div id="container" >
<div id="calsvt">
<div id="calsvtleft" >
//STUFF HERE
</div> <!-- for calsvtleft -->
<div id="calsvtright ">
//STUFF HERE
</div> <!-- for calsvtright -->
<div style="clear: both;"></div>
</div> <!-- for calsvt -->
<div id="footer">
<div id="footerleft" >
//STUFF HERE
</div>
<div id="footerright ">
//STUFF HERE
</div>
<div style="clear: both;"></div>
</div> <!-- for footer -->
<div style="clear: both;"></div>
</div> <!-- for container div -->
</body>
</html>
