I am working with two DIV tags that each have a background image.
<div class="content_bg">
<div id="content">
<div id="contentLeft">
</div>
<div id="contentRight">
</div>
</div>
</div>
<div class="footer_bg">
<div id="footer">
<div id="footerLeft">
</div>
<div id="footerRight">
</div>
</div>
</div>
When I manually specify the height of the content, everything displays correctly. However, if I set it to either 100% or Auto, the footer_bg ends up overlapping on top of the content_bg. Can anyone provide some guidance on this issue?
/*
====================================================================
Content Area
====================================================================
*/
.content_bg
{
background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
}
#content
{
width:980px;
margin:auto;
height:auto;
background:white;
}
#contentLeft
{
float:left;
width:209px;
margin-top:50px;
}
#contentRight
{
float:right;
width:770px;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
line-height:17px;
border-left:1px solid;
margin:20px 0 0 0;
}
/*
====================================================================
Footer
====================================================================
*/
.footer_bg
{
background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
}
#footer
{
width:980px;
height:258px;
margin:auto;
background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
}
#footerLeft
{
width:400px;
height:50px;
font-family:Verdana, Arial, sans-serif;
font-size:11px;
line-height:25px;
float:left;
padding: 20px 0 0 25px;
color:#fff;
}
#footerRight
{
width:100px;
height:50px;
float:right;
padding: 20px 0 0 0;
}