Problema sencillo con Float

[ofmjuanabascal]

Hola tengo estos dos fragmentos de codigo

Código HTML:

<link rel="stylesheet" href="styles.css">
<footer>
            <div class="container">
                <div id="contact">
                    <h3>Contactanos:</h3>
                    <ul class="footercontent">
                        <li>Telefono: <span class="italicfooter"><p>942 88 20 17</p><span></li>
                        <li>Direccion: <span class="italicfooter"><p>C/ Padre Damian 26</p><span></li>
                        <li>Cudad: <span class="italicfooter"><p>Torrelavega (Cantabria)</p><span></li>
                        <li>Email: <span class="italicfooter"><p>[email protected]</p><span></li>
                    </ul>
                </div>
                
                <div id="developers">
                    <h3>Los creadores:</h3>
                    
                    <div class="footercontent">
                    <p>
                    Este proyecto fue desarrollado por parte de los alumnos de <a class="italicfooter" href="#">1 de Bachillerato A</a> del curso 2011/12.
                    </p>
                    
                    
                    
                </div>
                
                <div id="social">
                <h3>Contactanos:</h3>
                <ul class="footercontent">
                <li>Telefono: <span class="italicfooter"><p>942 88 20 17</p><span></li>
                <li>Direccion: <span class="italicfooter"><p>C/ Padre Damian 26</p><span></li>
                <li>Cudad: <span class="italicfooter"><p>Torrelavega (Cantabria)</p><span></li>
                <li>Email: <span class="italicfooter"><p>[email protected]</p><span></li>
                </ul>
                </div>
                <div class="clear"></div>
            
            
            </div>
        </footer>
 

Código CSS:

/* FOOTER */
.italicfooter {display: inline; font-style: italic; color: #939393;}
.footercontent {padding: 10px 25px; display: block;}
 
footer {background: url('images/footer_bg.png') repeat-x #282828; height: 298px;}
#contact h3 {font:23pt Rockwell,sans-serif; color: #e3e3e3; padding: 5px 25px;}
#contact {position:relative; left: 20px; top: 40px; width: 270px; height: 190px; float:left; }
#contact {background: url('images/box_bg.png'); font:12pt Arial,sans-serif; color: #e3e3e3;}
#contact p{display: inline;}
 
#developers h3 {font:23pt Rockwell,sans-serif; color: #e3e3e3; padding: 5px 25px;}
#developers {position:relative; left: 20px; top: 40px; width: 270px; height: 190px; float: left;}
#developers {background: url('images/box_bg.png'); font:12pt Arial,sans-serif; color: #e3e3e3;}
#developers p{display: inline;}
 
#social h3 {font:23pt Rockwell,sans-serif; color: #e3e3e3; padding: 5px 25px;}
#social {position:relative; left: 150px; top: 40px; width: 270px; height: 190px; float: left;}
#social {background: url('images/box_bg.png'); font:12pt Arial,sans-serif; color: #e3e3e3;}
#social p{display: inline;}
/* END FOOTER */
 

Bien, se que no he puesto el html completo, pero solo necesitaba esa parte. Como veis el tercer div #social, me queda abajo, yo quiero alinearlos, pero no se porque no me deja, espero que puedan ayudarme. Gracias :)