Maravillas del Height

NeoGeneration · #1 (**permalink**) 08/02/2008, 05:20

Hola a todos!

Tengo un problemilla, he hecho una version corta de la web que estoy haciendo. No consiguo que el div blanco se estire hasta abajo.

Alguien puede echarme una mano? He probado con todo, pero las soluciones no me sirven. El content "wrap" funciona, se ajusta al lateral negro.

Pero el blanco ni para atras y supongo que todo se debe al float.

Un abrazo y gracias

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="height:100%;">
<div style="width:100%; background-color:#FF0000; height:auto;">
<div style="margin:0 auto; width:960px; background-color:#0099CC; height:auto;">
<div style="float:left; background-color:#000000; height:900px; width:215px;"></div>
<div style="background-color:#FFFFFF; height:100%; width:745px;"></div>
</div>
</div>

</body>
</html>

hCanté · #2 (**permalink**) 08/02/2008, 07:54

Esto es lo que quieres?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="height:100%;">
<div style="width:100%; background-color:#FF0000; height:auto;">
<div style="margin:0 auto; width:960px; background-color:#0099CC; height:auto;">
<div style="float:left; background-color:#000000; height:900px; width:215px;"></div>
<div style="float:left; background-color:#FFFFFF; height:900px; width:745px;"></div>
</div>
</div>

</body>
</html>

No entiendo porque solo coloque a tu div con el background blanco un float:left y la altura que necesito, también me funciono de la siguiente manera pero se ve distinto... no se cual de las dos estructuras que te dejo aqui necesitas?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="height:100%;">
<div style="width:100%; background-color:#FF0000; height:auto;">
<div style="margin:0 auto; width:960px; background-color:#0099CC; height:auto;">
<div style="float:left; background-color:#000000; height:900px; width:215px;">

<div style="background-color:#FFFFFF; height:100%; width:745px;"></div>

</div>
</div>
</div>

</body>
</html>

Este lleva un div anidado asi que el 100% funciona (en este caso) solo en IE6 porque en firefox se ve muy distinto incluso el que tu das... revisalo.

Saludos,

NeoGeneration · #3 (**permalink**) 08/02/2008, 08:35

mmmm.... Lo primero muchas gracias!

Pero no es exactamente a lo que me refiero... Voy a intentar explicarlo mejor :)

Tengo un div rojo... que actua practicamente de fondo... ese ok!

Uno azul que es la estructura... tiene un widht de 960 px... ok!

Ahora dentro de la estructura quiero que aparezca en la izquierda una columna de 900px negra y al lado otra columna blanca que ocupa el resto, tanto de ancho como de largo.

El problema que tengo es que dicha parte blanca no se me ajusta a la altura del negro.

No puedo ponerle tamaños estaticos porque quiero que varie segun el contenido y tampoco quiero hacer columnas falsas (pintar las columnas mediante background)

Ojala se te ocurra algo :) he probado de todo

GRACIAS

NeoGeneration · #4 (**permalink**) 08/02/2008, 13:12

Lo unico que se me ocurre es usar un min-height. Pero no me parece tampoco una idea muy profesional.