Foros del Web » Creando para Internet » CSS »

Div alineado al centro

Estas en el tema de Div alineado al centro en el foro de CSS en Foros del Web. Hola, veréis, tengo dos divs, y quisiera que estuvieran alineados al centro, pero es que, cuando le hago un position: absolute; con left y width ...
  #1 (permalink)  
Antiguo 19/10/2008, 12:35
 
Fecha de Ingreso: mayo-2007
Mensajes: 68
Antigüedad: 10 años, 6 meses
Puntos: 0
Div alineado al centro

Hola, veréis, tengo dos divs, y quisiera que estuvieran alineados al centro, pero es que, cuando le hago un position: absolute; con left y width 50%, se centran, pero uno tapa al otro, yo quiero que aparezcan uno al lado de otro, como lo puedo hacer?
  #2 (permalink)  
Antiguo 19/10/2008, 13:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div alineado al centro

Hola Zptweb:
(Creo que este tema te será de interés)

Crea un div contenedor donde alojar tus dos div´s y dale las siguientes propiedades:
Cita:
#contenedor {
margin: 0 auto;
padding: 0;
width: /*Es imprescindible que asignes una anchura, necesaria, en px, %, etc*/;
position: relative;
}
coloca dentro de él tu elementos, siendo su display: inline, y al que quieras colocar a la izquirda lo 'flotas' así, (float:left), el otro se posicionará a su derecha, siempre que la suma de sus anchuras no sobrepase la del contenedor.

Sobre lo que te sucede, si le indicas posición absoluta te los posiciona en las coordenadas indicadas referenciados al elemento que los contiene, y sin importar ni afectar al flujo del resto de elementos. Por eso los dos se colocan en el centro, porque cada uno de ellos no tiene en cuenta al otro ni le afecta.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 19/10/2008 a las 13:32 Razón: ampliar info con enlace
  #3 (permalink)  
Antiguo 19/10/2008, 13:04
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Div alineado al centro

para que estén uno al lado del otro deberías ponerlos dentro de OTRO div que esté centrado, y ponerles position:relative ...

seria algo asi:

Código HTML:
<div id="contenedor">
<div id="derecha"></div>
<div id="izquierda"></div>
</div> 
entonces en el css pones:

Código:
#contenedor{
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
#derecha{
width: 50%;
height: 100%;
float: right;
}
#izquierda{
width: 50%;
height: 100%;
float: left;
}




OTRA opción que también puede funcionar es crear los dos divs

Código HTML:
<div id="izq"></div>
<div id="der"></div> 
y poner en el CSS lo siguiente:

Código:
#izq{
position: absolute;
width: 50%;
height: 100%;
left: 0px;
top: 0px;
}
#der{
position: absolute;
width: 50%;
height: 100%;
right: 0px;
top: 0px;
}

aunque con esta opcion no podrías hacer que se centren en la pantalla y ocupen un ancho que no sea el 50%.. fijate cual te sirve mas :)

adios!
  #4 (permalink)  
Antiguo 19/10/2008, 13:14
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Div alineado al centro

Prueba esto quizás de partida te sea útil:

Código:
<style type="text/css">
<!--
#contenedor {
	width: 100%;
	background: #006666;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#contenedor #uno {
	width: 23%;
	background: #00CCCC;
	float: left;
	position: relative;
	left: 25%;
	top: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}
#contenedor #dos {
	background: #009999;
	display: block;
	width: 23%;
	float: right;
	position: relative;
	top: 0px;
	right: 25%;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.clear {
	clear: both;
}
-->
</style>
Te pongo el contenido del body:

Código HTML:
<body>
<div id="contenedor">
<div id="uno"><p>Lorem ipsum </p></div>
<div id="dos"><p>Lorem ipsum dolor sit amet, </p></div>
<div class="clear"></div>
</div>
</body> 
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:10.