Usar position absolute dentro de un div

hanscruz · #1 (**permalink**) 28/06/2007, 14:22

He realizado un diseño usando posiciones absolutas, ahora quiero que ese diseño este dentro un div llamado principal y poder mover este div, pero no me funciona usando el relative no puedo hacerlo ya que algunos divs no tienen alto definido, como puedo realizarlo, una ayuda por favor.

Saludos.

zegga · #2 (**permalink**) 28/06/2007, 19:43

Podrias postear el codigo que has utilizado???

hanscruz · #3 (**permalink**) 28/06/2007, 20:06

Bueno son dos DIVS, despues de revisar mucho note que el problema es el alto del primer div lo que no me esta tomando encuenta, aqui estan los codigos:

Código PHP:

  <div id="contenedor">

<div id="principal">
<div............
aqui estan todos los otros divs pero todos con posicion absolute
</div>
</div>

<div id="auxiliar">
aqui un contenido auxiliar
</div>

</div>

CSS:

Código PHP:

  #contenedor
{
width: 750px;
margin: 0 auto;
}
#principal
{
width: 750px;
position: relative;
margin: 0;
}
#auxiliar
{
width: 750px;
margin: 0;
}

los demas divs que contiene el div principal todos son con position absolute
no los pongo porque es arto el contenido

El problema en si es que el contenido del div auxiliar no sale debajo del div principal, si no que se dibuja encima en la parte de arriba del div principal.

Probe quitando los contenidos del div principal, osea los divs con posicion absoluta y poniendo contenido sin la posicion absoluta y se ve correctamente.

Por lo que llegue a la conclusion de que cuando se pone solo un(os) div(s) con posicion absoluta dentro de un div con posicion relativa este ultimo toma el height de 0 como si no tubiera contenido asi que alli esta el problema.

Seguro que tiene alguna solucion, pero no doy con ella.

Saludos

:.SMITEXX.: · #4 (**permalink**) 29/06/2007, 04:02

Agregale a los 2 esta línea:
float: left;
Te anexo el código y funciona.

Hice un ejercicio y queda así:

Código:

<style>
#contenedor
{
width: 750px;
margin: 0 auto;
}
#principal
{
	width: 750px;
	position: relative;
	margin: 0;
	float: left;
}
#auxiliar
{
	width: 750px;
	margin: 0;
	background-color: #CCCCCC;
	float: left;
}
</style>

hanscruz · #5 (**permalink**) 29/06/2007, 22:38

Pues no funiona aqui te pongo el codigo para que lo veas:

este le puse un contenido con posicion absoluta y no funciona:

Código PHP:

  <head> 
<style> 
#contenedor 
{ 
width: 800px; 
margin: 0 auto; 
background-color: #99CCFF; 
} 
#principal 
{ 
    width: 750px; 
    position: relative; 
    margin: 0; 
    float: left; 
} 
#auxiliar 
{ 
    width: 750px; 
    margin: 0; 
    background-color: #0000CC; 
    float: left; 
} 
</style> 
</head> 
<body> 
<div id="contenedor"> 
 
<div id="principal"> 
 
<div style="background-color: yellow; width: 700px; height: 100px; position: absolute; right: 0; bottom: 25px;"> 
estan todos los otros divs pero todos con posicion absolute 
</div> 
<div style="background-color: red; width: 700px; height: 100px; position: absolute; right: 0; bottom: 25px;"> 
estan todos los otros divs pero todos con posicion absolute 
</div> 
 
</div> 
 
<div id="auxiliar"> 
aqui un contenido auxiliar 
</div> 
 
</div>

Como ya dije antes el problema es que no toma altura es como si el div principal no tubiera contenido

hanscruz · #6 (**permalink**) 01/07/2007, 10:23

Aun no logro resolverlo alguien puede darme alguna idea de como podria hacerlo, gracias.

hanscruz · #7 (**permalink**) 04/07/2007, 08:14

Nuevamente pido una manito ya que intente mucho y no pude solucionarlo encontre un articulo donde se confirma lo que pense, cuando se pone dentro de una capa con posicion relative solamente contenidos con posicion absoluta esta se sale de la capa por lo que el alto(height) de la capa contenedora siempre cera nula o cero.

Aun asi en ese articulo no daban una solucion al problema por lo que pido ayuda una ves mas talves el moderador tenga alguna sugerencia.

saludos

hanscruz · #8 (**permalink**) 14/07/2007, 10:29

Subo nuevamente el tema haber si alguiejn entendido en el tema me da una solucion o una idea ya que aun no lo solucione.

Pollito_69 · #9 (**permalink**) 14/07/2007, 10:47

¿Pero para que necesitas dar position:relative? ¿y si en vez de eso, directamente coges el contenido que quieres mover y lo posicionas encima? o crea otro div nuevo donde lo quieres posicionar con el css que prefieras.
Siento no ser de más ayuda, pero sin ver lo que quieres mover exactamente no puedo ayudarte mas. Un saludo y suerte