Foros del Web » Creando para Internet » CSS »

alineamiento de capas de distintas alturas

Estas en el tema de alineamiento de capas de distintas alturas en el foro de CSS en Foros del Web. hola, mi problema consiste en alinear 3 capas una al lado de la otra con alturas variables y que una de ellas (la última capa) ...
  #1 (permalink)  
Antiguo 29/10/2007, 14:54
Avatar de deet  
Fecha de Ingreso: mayo-2005
Ubicación: Córdoba - Argentina
Mensajes: 269
Antigüedad: 12 años, 6 meses
Puntos: 1
alineamiento de capas de distintas alturas

hola,

mi problema consiste en alinear 3 capas una al lado de la otra con alturas variables y que una de ellas (la última capa) se posicione de tal manera que quede alineada con la parte inferior de la capa anterior.

columna 1 | columna 2 | columna 3
columna 1 | columna 2 |
columna 1 | columna 2 | columna 3

la columna 1 tiene una altura fija de 70px.
la columna 2 tiene una altura variable, siempre es más alta que la columna 1.
la columna 3 tiene una altura variable, siempre es menor a la columna 2, además tiene que estar alineada con la parte inferior de la columna 2.

intenté con el siguiente y otros códigos más pero no pude resolver mi problema:
Código:
<style type="text/css">

#reg_file{
	background-color:#CCCCCC;
	width:90px;
	float:left;
}
#reg_desc{
	background-color:#FFFFFF;
	width:290px;
	float:left;
	border-right:#CCCCCC 1px solid;
}
#reg_opt{
	background-color:#CCCCCC;
	width:89px;
	float:left;
	bottom:0px;
	height:100%;
	
}
#desc_cont{
	margin-left:3px;
	margin-right:3px;
}
#desc_firma{
	text-align:right;
	margin-top:5px;
	margin-right:3px;
}
#reg_sep{
	clear:both;
	border-bottom:1px #666666 solid;
	width:470px;
	height:5px;
}
</style>

<div id="registro0" class="registros">
			<div id="reg_file"><img src="../fotos/thumb/foto.jpg" width="90" height="70" /></div>
			<div id="reg_desc">
				<div id="desc_cont">descripcion</div>
				<div id="desc_firma">firma]</div>
			</div>
			<div id="reg_opt"><div>opciones</div></div>
			<div id="reg_sep"></div>
		</div>
  #2 (permalink)  
Antiguo 30/10/2007, 15:11
Avatar de deet  
Fecha de Ingreso: mayo-2005
Ubicación: Córdoba - Argentina
Mensajes: 269
Antigüedad: 12 años, 6 meses
Puntos: 1
Re: alineamiento de capas de distintas alturas

me respondo a mi mismo, para todo aquel que lo necesite:

Código PHP:
<div style="position:relative; margin:20px; width:450px; border:1px solid red;">
    <
div style="position:absolute; left:0px;width:80px; background-color:#CCCCCC;">asdfad<br />sa a as<br />dsfa sf a<br />afasd</div>
    <
div style="top:0px; left:0px; width:300px; background-color:#FFFFCC;margin-left:80px; margin-right:70px;">asdfadsfa sf asd fasf asdf asdf asdf a afasd fasdf asdf asd asd fas sa sa a as asdfadsfa sf asd fasf asdf asdf asdf a afasd fasdf asdf asd asd fas sa sa a as asdfa dsfa sf asd fasf asdf asdf asdf a<br />afasdfasdf asdf asd asd fas sa sa a as<br />asdfadsfa sf asd fasf asdf asdf asdf a<br />afasdfasdf asdf asd asd fas sa sa a as<br />asdfadsfa sf asd fasf asdf asdf asdf a<br />afasdfasdf asdf asd asd fas sa sa a as<br />asdfadsfa sf asd fasf asdf asdf asdf a<br />afasdfasdf asdf asd asd fas sa sa a as </div>
    <
div style="width:70px; height:auto; position:absolute; bottom: 0px; right:0px; background-color:#CCCCCC; "><p style="margin:3px;">boton<br />boton1</p></div>
</
div
el código lo saqué del siguiente link, y lo he modificado para que funcione en firefox, la verdad no se mucho de css asi que no sé si es correcto hacerlo de esa forma, aunque me resolvió el problema que tenía.

http://www.tripix.net/2004/12/18/el-...al-contenedor/

Última edición por deet; 30/10/2007 a las 15:26
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 21:17.