Whenever I add the Float: Left to either the #additional or #subscribe div it removes the border from the #footer.
Testing it here:
sandbox DOT jasonandrewsmusic DOT com
On the page I have green and yellow for the #additional and #subsribe but no float:left on them.
.container{
width:800px;
height:auto;
margin: 0 auto;
}
#footerborder{
height:36px;
margin:0px -16px -30px -20px;
background: url(/wp-content/themes/composer/images/footer-border.png) bottom left repeat-x;
z-index:3;
}
#footer{
margin:20px -16px -30px -20px;
color:#EDECE0;
background-color:#0A0D12;
z-index:3;
}
#footer a{
color:#D8D7CE;
}
#subscribe{
width:210px;
height: auto;
padding:0px 50px 0px 0px;
}
#additional{
width:389px;
height:auto;
padding:0px 0px 0px 20px;
border-left:1px solid #990000;
}
.center{
text-align:center;
}
.fl{
float:left;
}
.fr{
float:right;
}
.clear {
clear:both;
}
<div id="footerborder" class="clear"></div><!-- #footerborder .clear -->
<div id="footer">
<div class="container">
<div id="subscribe" class="fl">
<ul>
<li><a href="http://sandbox.jasonandrewsmusic.com/feed/" title="RSS Feed" /><img src="http://sandbox.jasonandrewsmusic.com/wp-content/themes/composer/images/rss-feed.png" /></a><a href="http://sandbox.jasonandrewsmusic.com/feed/" title="RSS Feed" />RSS Feed</a></li>
</ul>
</div><!-- #subscribe .fl -->
<div id="additional" class="fl">
<p class="copyright center">© 2007-2009 <a href="http://sandbox.jasonandrewsmusic.com" title="Jason Steven Tienes Andrews" />JasonAndrewsMusic.com</a> and <a href="http://www.maelstrommelody.com/" title="Music for the Mind" />Maelstrom Melody</a></p>
</div><!-- #additional .fl -->
</div><!-- .container -->
</div><!-- #footer -->
