Div alineado al centro

Zptweb · #1 (**permalink**) 19/10/2008, 11:35

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?

kseso? · #2 (**permalink**) 19/10/2008, 12:00

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

nazareno59 · #3 (**permalink**) 19/10/2008, 12:04

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!

talmente · #4 (**permalink**) 19/10/2008, 12:14

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>