footer probleem

Wie ziet hier de fout in dat div #footer niet de kleur mee krijgt?

<!DOCTYPE html>
<html >
<head>
<meta charset=utf-8 />
<title>Untitled Document</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0 auto; 
    padding: 0;
    text-align: center;
    color: #000000;
}

#footer{
    width:980px;
    margin: 0px auto;
    background:#FF0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.footerCenter{
    margin: 0px 255px;
    background:#FF0;
    position:absolute;
}

.middenfooter{
    float:left;
    width:215px;
    padding:10px;
}
.footLinks{
    width:225px;
    /*background:#F00;*/
    float:left;
    padding:10px;
}
.footerRechts{
    float:right;
    width:225px;
    padding:10px;
}

</style></head>

<body>

<div id="footer">
    <div class="footerRechts">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div class="footLinks">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div class="footerCenter">
        <div class="middenfooter" style="background:#0FF;">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
        
        <div class="middenfooter" style="background:#F0F;">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div> 
        <div>
            <p style=" clear:both; padding:21px 0;">Copyright  2012 - 2012 Website. All Rights Reserved.</p>
        </div>
    </div>
</div>    

</body>
</html>

hier vind men het zelfde maar overzichterlijker
link

Of zet heel deze code in een spoiler, of post enkel de nuttige code (#footer { xxx }).

toevoeging op 28 augustus 2012, 14:35:12:
En de kleur werkt wel. Alleen heeft de footer geen hoogte doordat je die op auto hebt staan wat nu 0 is want alle elementen in je div met als ID "footer" hebben een float: left;. Valt waarschijnlijk op te lossen met een clear: both;

Dat over de hoogt van de div="footer" loste het op bedankt