No he podido posicionar correctamente mis divs.

[iovan]

Hola amigos verán les muestro una captura de pantalla de lo que quiero hacer


ver imagen en tamaño completo

estilo css

Código CSS:

body {
    background:url(themes/default/images/bg.png);
    background-repeat:repeat-x;
    background-color:#DDD;
}
#header {
    width:100%;
    height:150px;
    color:#fff;
}
#content {
    width:80%;
    margin: 30px auto;
    margin-bottom:2.5em;
}
#footer{
    background: url(themes/default/images/footer-bg.png);
    background-repeat:repeat-x;
    margin-top:15px;
}
 

Lo que deseo lograr es que el pie de página no se me convine con los estilos del content, del cuerpo de la págiona.

Pero cuando agrego divs flotantes.
como estos:

Código CSS:

#content div.left {
    float:left;
    width:450px;
    
}
#content div.right {
    float:right;
    width:600px;
    margin-left:1.5em;
}
 

Todo se descompone y me queda así:


Ver imagen en tamaño completo

estilo 2 css:

Código CSS:

body {
    background:url(themes/default/images/bg.png);
    background-repeat:repeat-x;
    background-color:#DDD;
}
#header {
    width:100%;
    height:150px;
    color:#fff;
}
#content {
    width:80%;
    margin: 30px auto;
    margin-bottom:2.5em;
}
#content div.left {
    float:left;
    width:450px;
    
}
#content div.right {
    float:right;
    width:600px;
    margin-left:1.5em;
}
#footer{
    background: url(themes/default/images/footer-bg.png);
    background-repeat:repeat-x;
    margin-top:15px;
}
 

document html 2:

Código HTML:

<div id="header">
Cabecera de la pagina
</div>
 
<div id="content">
   
   <div class="left">
     Bloque a la izquierda
   </div>
   
   <div class="right">
     Bloque a la derecha
   </div>
 
</div>
 
<div id="footer">
Este es el pie de página.
</div>
 

Es así de sencillo. ¿Por qué no me sale?

muchas gracias.
Saludos.