CSS: Multi-color footer background issue - css

Question

I having difficulties setting my footer properly. I have a Bottom navigation bar as part of my footer which is working fine(color:#7A7A7A). The issue is with the copy right information that follows. It has an address and phone number. I am wanting that this side of the footer to have a black bakcground(#000). This part is labeled in the css under copyRight which i am not get any results. Any Ideas of what may be wrong?
Here is my Live EXAMPLE.
Thank you
CSS
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
}
.left{float:left;}
.right{float:right;}
</style>

Answer 1

You're floating the contents of #copyRight so it needs to be floated in order to contain them properly. Add this to #copyRight:
float: left;
width: 100%;
Read Brilliand detailed explanation below

Answer 2

Add overflow:hidden in #copyRight
So your CSS should look like this:
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
overflow:hidden
}

Answer 3

The problem you are having is that most elements, including divs, do not by default expand to contain floating elements. Since everything within copyRight is floating, it behaves as though it were empty, and shrinks to nothing.
There are many ways to make an element expand to contain floating elements. My personal favorite is to set overflow to just about anything - hidden being the most common.
#copyRight{
overflow: hidden;
}
Another way is to make the containing element float too, though it's then liable to cause the same problem with the element trying to contain it. Also, floating causes shrinkwrapping, so you have to set an explicit width:
#copyRight{
float: left;
width: 100%;
}
A similar result can be achieved using various display declarations, such as display: inline-block. This avoids propagating the problem to the parent element:
#copyRight{
display: inline-block;
width: 100%;
}
Apparently back in 2004 it was considered a wonderful new idea to solve such a problem by inserting a clearing element with the :after pseudo-class instead of the older method of adding a <div style="clear:both;"></div>. Those tricks would also solve your problem, though clearing floats and containing them are not quite the same thing.