2 columnas, problemas con height

EmpireFX · #1 (**permalink**) 19/11/2009, 08:50

Hola, busque muchos ejemplos sobre lo que preciso pero ninguno me sirvio, el problema se me va de las manos ya que tengo que modificar un sitio y tiene mucho y muchos <div's>, asi que primero quiero tener bien claro este ejemplo simple.

Tengo 2 columnas (#izquierda y #derecha) dentro de #box, en la segunda columna (#derecha) la altura tiene que tener la misma altura que #box a medida que va creciendo y no puedo lograr eso.

Dejo lo que tengo empezando..

Código:

<html>
<head>
    <title>Prueba 01</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <style type="text/css">
        #box{background-color:#0066FF;}
        #izquierda{background-color:#00CCFF;}
	#derecha{background-color:#0099FF;}

	div#box{width:400px;}
	div#izquierda{width:250px;}
	div#derecha{width:150px;}
    </style>
</head>
<body>
    <div id="box">
        <div id="izquierda">
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
        </div>
        <div id="derecha">
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
        </div>
    </div>
</body>
</html>

Saludos

chotuno · #2 (**permalink**) 19/11/2009, 09:16

Para empezar, si pones float:left; a las 3 capas (box, izquierda y derecha) no se te vera una encima de otra sino una a la izquierda y otra a la derecha.

Sólo con esto la #derecha ya llega hasta abajo de la capa #box.

Impostor · #3 (**permalink**) 19/11/2009, 09:26

En la pagina www(punto)araudi.net puedes encontrar algunos ejemplos que te sirvan de orientación.

Saludos¡¡

EmpireFX · #4 (**permalink**) 19/11/2009, 12:53

woot, encontre la solucion aqui www ejeliot.com/blog/61, en este ejemplo, www ejeliot.com/samples/equal-height-columns/example-4.html

Dejo el codigo por si les interesa, Saludos y gracias por la ayuda

Código:

<html>
<head>
    <title>Prueba 01</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
    <style type="text/css">
        #box{background-color:#0066FF;}
        #izquierda{background-color:#00CCFF;}
	#derecha{background-color:#0099FF; }

	div#box{width:400px; float:left; margin: 0;padding: 0; overflow: hidden;}
	div#izquierda{width:250px; float:left; }
	div#derecha{width:150px; float:left; height: 100%; margin-bottom: -2000px; padding-bottom: 2000px; }
    </style>
</head>
<body>
    <div id="box">
        <div id="izquierda">
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		COL_IZQUIERDA<br>
		</div>
        <div id="derecha">
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
		COL_DERECHA<br>
        </div>
    </div>
</body>
</html>