Foros del Web » Creando para Internet » CSS »

2 columnas, problemas con height

Estas en el tema de 2 columnas, problemas con height en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/11/2009, 08:50
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 9 años, 9 meses
Puntos: 3
2 columnas, problemas con height

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
  #2 (permalink)  
Antiguo 19/11/2009, 09:16
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: 2 columnas, problemas con height

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.
  #3 (permalink)  
Antiguo 19/11/2009, 09:26
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: 2 columnas, problemas con height

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

Saludos¡¡
  #4 (permalink)  
Antiguo 19/11/2009, 12:53
Avatar de EmpireFX  
Fecha de Ingreso: marzo-2008
Ubicación: in da house
Mensajes: 60
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: 2 columnas, problemas con height

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>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:33.