Foros del Web » Creando para Internet » CSS »

Expandir alto de columna

Estas en el tema de Expandir alto de columna en el foro de CSS en Foros del Web. En un diseño de dos columnas: .contenedor { width: 95%; } .left { width: 110px; float: left; padding: 5px; } .right { margin-left: 120px; } ...
  #1 (permalink)  
Antiguo 13/08/2006, 09:44
 
Fecha de Ingreso: febrero-2005
Mensajes: 33
Antigüedad: 19 años, 2 meses
Puntos: 0
Expandir alto de columna

En un diseño de dos columnas:

.contenedor {
width: 95%;
}

.left {
width: 110px;
float: left;
padding: 5px;
}

.right {
margin-left: 120px;
}

¿Cómo puedo hacer que el ancho de la columna de la derecha expanda su "alto" (height) al mismo tamaño que el de la izquierda?

Gracias por anticipado.
__________________
"Inteligencia militar son términos contradictorios" (G. Marx).
  #2 (permalink)  
Antiguo 13/08/2006, 14:26
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 17 años, 8 meses
Puntos: 0
Hay varios trucos para ello, y un hilo al respecto:
http://www.forosdelweb.com/f53/dentro-div-padre-div-b-como-hacer-que-ambos-tengan-altura-414106/
  #3 (permalink)  
Antiguo 14/08/2006, 06:39
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 19 años, 9 meses
Puntos: 4
el truco que dan ahi no sirve de nada porque en 99% de los casos la altura del contenedor de los floats nunca se sabe, entonces no se le puede dar un alto fijo, por lo tanto no funciona height:100%;
la unica forma correcta sin trucos ni nada es usar posiciones absolutas, pero en IE no funciona y no hay hack que funcione, si dios quiere con la salida del IE7 se va a poder hacer paginas dignas sin hacks.

ejemplo:
Código:
#main {
			border:1px solid #555;
			overflow:auto;
			position:relative;
		}
		.fbox_l {
			width:150px;
			position:absolute;
			top:5px;
			left:5px;
			bottom:5px;
			border:1px solid #555;
			background:#eee;
		}
		.fbox_r {
			width:150px;
			position:absolute;
			top:5px;
			right:5px;
			bottom:5px;
			border:1px solid #555;
			background:#eee;
		}
		.content {
			margin:0 160px;
		}
...
<div id="main">
	<div class="fbox_l"></div>
	<div class="fbox_r"></div>
	<div class="content"></div>
</div>
__________________
Internet Explorer SuckS
Download FireFox
  #4 (permalink)  
Antiguo 14/08/2006, 10:01
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 18 años, 6 meses
Puntos: 4
tambien existe la manera para que no se expanda pero que haga parecereso.
poniendole un background, simulado la columna de a lado..

yo trato de usar lo menos posible las posicones absolutas
=)
__________________
Saludos
FT.
www.fernando.com.mx
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 16:39.