Foros del Web » Creando para Internet » CSS »

Posicionar div al final de otro

Estas en el tema de Posicionar div al final de otro en el foro de CSS en Foros del Web. Hola, Tengo un div contenedor y dentro otro div, el cual quiero posicionar en la esquina inferior derecha. He buscado en la web sobre el ...
  #1 (permalink)  
Antiguo 24/03/2010, 07:55
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Posicionar div al final de otro

Hola,

Tengo un div contenedor y dentro otro div, el cual quiero posicionar en la esquina inferior derecha. He buscado en la web sobre el tema, pero lo que he conseguido hasta ahora es que el div se posicione en la esquina inferior derecha del navegador, no del contenedor.

Este es el código CSS
Código HTML:
.contenedor {
	width:600px;
	height:400px;
	margin:auto;
	background-color:#0CF;
	border:#000 solid 3px;
	position:relative;
}
			
.enlace {
	width:100px;
	height:40px;
	background-color:#06F;
	border:#FFF solid 2px;
	float:right;
	bottom:0px;
	right:0px;
	position:fixed;
}
Y este el de la página
Código HTML:
<div class="contenedor">
    	<div class="enlace">
        </div>
    </div> 
  #2 (permalink)  
Antiguo 24/03/2010, 08:30
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Posicionar div al final de otro

Hola tempo,

el fallo que cometiste fue que debiste usar posiciones relativas en vez fixed. Este tutorial te puede aclarar. Con este css que pongo funciona, al menos en firefox.

Código CSS:
Ver original
  1. .contenedor {
  2.     width:600px;
  3.     height:400px;
  4.     margin:auto;
  5.     background-color:#0CF;
  6.     border:#000 solid 3px;
  7. }
  8.            
  9. .enlace {
  10.     width:100px;
  11.     height:40px;
  12.     background-color:#06F;
  13.     border:#FFF solid 2px;
  14.     top:357px;
  15.     left:497px;
  16.     position:relative;
  17. }

Toqueteando un poco, este código también es válido, he usado position absolute y al contenedor relative.

Código CSS:
Ver original
  1. .contenedor {
  2.     width:600px;
  3.     height:400px;
  4.     margin:auto;
  5.     background-color:#0CF;
  6.     border:#000 solid 3px;
  7.     position:relative;
  8. }
  9.            
  10. .enlace {
  11.     width:100px;
  12.     height:40px;
  13.     background-color:#06F;
  14.     border:#FFF solid 2px;
  15.     bottom:0px;
  16.     right:0px;
  17.     position:absolute;
  18. }

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.

Última edición por Impostor; 24/03/2010 a las 12:46
  #3 (permalink)  
Antiguo 24/03/2010, 10:38
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Posicionar div al final de otro

Me gusta más la segunda forma, para no estar calculando medidas con el top y right. Además funciona en explorer y firefox
Gracias!

Etiquetas: final, posicionar
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 00:48.