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.

[Adermall]

No es que se te descomponga, lo que pasa es que necesitas ponerle MIN-HEIGHT a tu div contenedor, digamos, ponle, no se 100 px y has la prueba.

Cuando pones un div a flotar, lo estas liberando de su elemento padre, y a su ves, liberas al elemento padre de ese div. Si ese elemento padre obtiene su tamaño vertical del contenido de sus elementos hijos, cuando los pones a "flotar", el elemento padre entiende que no tiene algo que defina su altura, mas que su margin de 60 px en este caso (30 arriba, 30 abajo).

Espero haberme explicado.

[iovan]

Tu explicacion esta perfecta. te lo agradesco mucho amigo.

Me ha funcionado bien. Muchas gracias ;)

Saludos

[Adermall]

Para servirte amigo ;)

[alexk]

bueno la mejor manera de limpiar floats es con overflow:hidden ami gusto y segun...
http://www.librosweb.es/css_avanzado...ar_floats.html

[iovan]

alexk, has solucionado al 100% la duda que me ha surgido desde siempre.

Te lo agradezco mucho amigo.

Saludos.
P.D: Te dejo Karma por tu genial respuesta ;)