esto es el codigo de las 3 columnas:
Código HTML:
<body>
<div id="container">
<div id="cabecera_i"><!--ESTO ES UN DIV VACIO QUE SOLO SIRVE COMO DECORATIVO--></div>
<div id="cabecera">
aqui va la cabecera
</div>
<div id="cabecera_d"><!--ESTO ES UN DIV VACIO QUE SOLO SIRVE COMO DECORATIVO--></div>
</div>
</body>
Este es el archivo de hojas de estilo:
Código:
/*** ESTILO DE LA PÁGINA ***/
body {
background: #04283b url(../images/fondo.gif) top no-repeat;
}
/*** CLASES PROPIAS ***/
#container {
width: auto;
}
#cabecera_i {
width: auto;
background: red;
float: left;
}
#cabecera_d {
width: auto;
background: red;
float: right;
}
#cabecera {
width: 928px;
height: 227px;
background: green;
margin: 0 auto 0 auto;
}
Lo único que quiero es que las columnas laterales ocupen el ancho completo de la pantalla menos lo que ocupe la columna de enmedio. Ahora aparce el fondo con colores pero en realidad será rellenado con imagen de fondo como el típico repeat-x.
El problema está en que como las columnas laterales es que el ancho es automático y como no tienen contenido pues no crecen a lo ancho y no ocupan el espacio para completar la pantalla, sino que me queda una columna cabecera que ocupa su sitio correctamente en el medio y dos columnas a los laterales que no ocupan más que un milimetro de ancho.