Problema con CSS, alguien me puede ayudar¿?

Hola buenas noches,

Estoy que me tiro de los pelos ... Tengo que hacer un modelo de cajas para una web con una cabecera, un menú horizontal, dos columnas y un pié. Hasta aquí todo correcto, pero tengo un problema con el fondo de la web. En el Body le he dado un color de fondo pero en el div principal le he puesto otro, para generar el contraste, pero del color del div no hay ni rastro :S

Alguien me puede ayudar¿? os pego el código por si alguien me puede ayudar.
body {
   background-color: #A49E99;
   font: normal normal normal 101.5%/1.4em Arial, Tahoma, Verdana, Helvetica;
}
div {
   display: block ;
}

#content{
   margin: 0 auto;
    width: 960px;
    height:auto;
    background-color:#FFF;
}
#header {
   width: 960px;
    height: 130px;
    margin:0 auto 0 auto;
    background: url(../img/header.png);
}
#col1{
   width: 210px;
   float: left;
   text-align: center;
}
#col2{
   width: 750px;
   float: right;
   text-align: center;
}
#footer {
   width: 960px;
   height:auto;
   background-color: #484545;
   color: #FFFFFF;
   text-align: center;
   font-size: 9px;
   float:left;
}


y el de la web
<div id="content">
       <div id="header"></div>
        <div id="navmenu"></div>
       <div id="col1"></div>
        <div id="col2"></div>
        <div id="footer"></div>
      </div>
didi1982 escribió:Hola buenas noches,

Estoy que me tiro de los pelos ... Tengo que hacer un modelo de cajas para una web con una cabecera, un menú horizontal, dos columnas y un pié. Hasta aquí todo correcto, pero tengo un problema con el fondo de la web. En el Body le he dado un color de fondo pero en el div principal le he puesto otro, para generar el contraste, pero del color del div no hay ni rastro :S

Alguien me puede ayudar¿? os pego el código por si alguien me puede ayudar.
body {
   background-color: #A49E99;
   font: normal normal normal 101.5%/1.4em Arial, Tahoma, Verdana, Helvetica;
}
div {
   display: block ;
}

#content{
   margin: 0 auto;
    width: 960px;
    height:auto;
    background-color:#FFF;
}
#header {
   width: 960px;
    height: 130px;
    margin:0 auto 0 auto;
    background: url(../img/header.png);
}
#col1{
   width: 210px;
   float: left;
   text-align: center;
}
#col2{
   width: 750px;
   float: right;
   text-align: center;
}
#footer {
   width: 960px;
   height:auto;
   background-color: #484545;
   color: #FFFFFF;
   text-align: center;
   font-size: 9px;
   float:left;
}


y el de la web
<div id="content">
       <div id="header"></div>
        <div id="navmenu"></div>
       <div id="col1"></div>
        <div id="col2"></div>
        <div id="footer"></div>
      </div>

A mi se me muestra sin problemas, este es el código HTML:

<body>
    <div id="content">
   <div id="header"></div>
   <div id="navmenu"></div>
   <div id="col1"></div>
   <div id="col2"></div>
   <div id="footer"></div>
    </div>
</body>

Y he puesto el CSS con Firebug. En este tipo de casos te recomiendo tirar de Firebug, pues ayuda mucho. Aquí una captura:

Imagen

Saludos.
Si hasta ahí todo bien, pero si rellenas las columnas verás como pasa de tu cara y directamente te deja el fondo en gris ... A mi me hace eso. También uso el firebug para verificar esas cosas por eso me he venido al foro, a ver si alguna alma caritativa daba con el problem :)
didi1982 escribió:Si hasta ahí todo bien, pero si rellenas las columnas verás como pasa de tu cara y directamente te deja el fondo en gris ... A mi me hace eso. También uso el firebug para verificar esas cosas por eso me he venido al foro, a ver si alguna alma caritativa daba con el problem :)

¿Puedes subir en un archivo comprimido (tar.gz o 7z) TODOS los archivos relacionados?
Muchas gracias por la ayuda capitanquartz!!!

Te paso l oque me pides ... yo por mi parte me estoy volviendo loco, no logro a entender el motivo por el cual hace lo que le viene en gana con el div ...

Adjuntos

Elimina del css #footer el "float: left" y añade un "clear: both"
aportela escribió:Elimina del css #footer el "float: left" y añade un "clear: both"


El maldito crack eres!!!! Ya me volvía loco ... no entendía el motivo por el que hacía eso ... ahora buscaré la documentación del clear para tener más claro que hace.

MUCHAS GRACIAS CRACK!!!
6 respuestas