Explicacion de este evento (background)

gcs · #1 (**permalink**) 09/07/2008, 07:42

Gente,

Anteriormente habia consultado, pero creo que con algo de ayuda (clear: both;) pude solucionar parte del problema.

El asunto es que si uds ven la imagen abajo veran que el sitio esta estructurado en su contenido con div's de 4 columnas (omitamos errores de validacion con W3), sin embargo, el contenido de cada Div (columna) es distinto por lo que me queda un hueco AZUL que pertenece al background.

Por lo que decidi encerrar esas columnas en otro DIV general y darle la propiedad de background-color:#FFFFFF sin embargo no sucede.

Alguien me podria explicar como solucionarlo, es decir que se vea el fondo blanco en ambas columnas hasta el final, asumiendo que los contenidos puedan variar y el jugar con el padding-bottom:xxxpx no sea la solucion:

Adjunto el contenido de mi CSS:

Código:

#content-ColA {
	background-color:#FFFFFF;
	width: 346px;
	float: left;
	padding: 5px;
}

#content-ColB {
	background:#FFFFFF;
	background-image:url(../images/segmento_columna.gif);
	background-repeat: repeat-y;
	width: 284px;
	float: left;
	padding: 5px;
	padding-bottom:15px;
}

#content-ColC {
	background-color:#FFFFFF;
	width: 190px;
	float: left;
	padding: 5px;
	padding-bottom:83px;
}

#content-ColD {
	background-color:#FFFFFF;
	width: 164px;
	float: left;
	padding: 5px;
	padding-bottom:105px;
}

este es el problema visualmente hablando

Mikmoro · #2 (**permalink**) 09/07/2008, 08:13

Una cosita: ¿y no sería más sencillo que el background de ese contenedor general centrado fuera blanco?

Mikel.

Mikmoro · #3 (**permalink**) 09/07/2008, 08:19

Quiero decir, algo de este estilo:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height: 100%;}
body {background-color: #000;}
#contenedor {width: 98%;margin: 0 auto;background-color: #FFF;height: 100%;}
#content-ColA {
background-color:#FFFFFF;
width: 340px;
float: left;
padding: 5px;
}
#content-ColB {
background:#FFFFFF;
background-image:url(../images/segmento_columna.gif);
background-repeat: repeat-y;
width: 280px;
float: left;
padding: 5px;
padding-bottom:15px;
}
#content-ColC {
background-color:#FFFFFF;
width: 180px;
float: left;
padding: 5px;
padding-bottom:83px;
}
#content-ColD {
background-color:#FFFFFF;
width: 160px;
float: left;
padding: 5px;
padding-bottom:105px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="content-ColA">Texto de prueba</div>
<div id="content-ColB">Texto de prueba</div>
<div id="content-ColC">Texto de prueba</div>
<div id="content-ColD">Texto de prueba</div>
</div>
</body>
</html>

Mikel.