Div no reconoce el contenidom de otro div

[hanscruz]

Bueno este problema lo llevo ya mucho tiempo y no le encuentro solcucion el lio va asi:

Resulta que ya logre hacer muchos diseños completamente en css pero ahora quiero hacerlo mas personalizable aun, es decir que solo se cambie el archivo css y cambie todo el diseño incluyendo las posiciones de las capas.

Para esto utilize divs con posicion absoluta, asi se personaliza todo es diseño es decir el menu vertical puede ir a la izquierda, derecha, arriba, la cabecera puede ser de menor tamaño y estar a la izquierda o derecha, sobre el menu etc., osea sin tocar nada el codigo de la pagina.

Hasta ahi no tengo problema ya que logre cambiar todo el diseño solo cambiando una linea del codigo de la pagina (la direccion del archivo css).

El problema surge cuando necesite poner debajo del diseño una capa, que siempre debe mantenerse bajo el diseño sea cual sea el diseño, pero como el contenido del diseño no tiene una altura ya que variara dependiendo del contendio en si, entonces esa capa que debe ir debajo de todo el diseño no puedo darle una posicion absoluta, asi que hice pense en hacer lo siguiente:

Puse todo el diseño personalizable dentro de una div llamado principal y le di posicion relativa, debajo puse el div extra que necesitaba poner tambien con posicion relativa, funcionaba perfecto, pero cuando hice el diseño personalizable solo con divs con posicion absoluta aparecio el problema, es decir que el div principal con posicion relativa parecia vacio y no tomaba una altura, y el div auxiliar que debe ir debajo el diseño se superpuso, he ahi el problema.

les dejo unas imagenes para que sea aun mas comprensible:

Asi debe ser el diseño que quiero:


Asi es como se ve ahora:


Bien segun lo que he investigado creo que no se puede lograr asi como yo quiero hacerlo, pero no estoy seguro ya que no encontre nada exactamente igual si no algunos articulos con algo en comun en donde dicen que la altura de una capa div con posicion relativa que tenga contenidos divs con posicion absoluta es nula es decir se salen del div, quisiera saber si es mi caso o no.

Les deje toda esta explicacion para que me echen una mano una idea de como puedo corregir el error o de no poder hacerce de esta manera darme otra sugerencia o solucion, para poder logralo.

Saludos.

[Ricky77]

No acabo de comprender muy bien tu idea. Principalmente cuando dices:

Para esto utilize divs con posicion absoluta, asi se personaliza todo es diseño es decir el menu vertical puede ir a la izquierda, derecha, arriba, la cabecera puede ser de menor tamaño y estar a la izquierda o derecha, sobre el menu etc., osea sin tocar nada el codigo de la pagina.

Más que nada porque a no ser que te haya entendido mal, no es necesario ni mucho menos hacer algo así. De hecho el uso de posicionamientos absolutos se recomienda como último recurso cuando no entra otra posibilidad. No porque no sean útiles, si no por no rizar el rizo.

Para sólo tener que editar la CSS para cambiar el diseño de una página, lo único que necesitas es tener un código limpio y ordenado donde todos y cada uno de los elementos estén dispuestos de forma adecuada. Una vez tienes eso puedes hacer lo que desees desde la CSS.

De hecho el diseño que propones en las imágenes es de lo más sencillo.

Para que te hagas una idea http://csszengarden.com/ es una web donde cualquiera puede coger las CSS y hacer un bonito diseño sin tocar una sola linea del código xhtml sin tener que dar posicionamientos absolutos obligatoriamente, y hay quienes han hecho autenticas locuras.


De todos modos ya te adelanto que en cuestiones de diseño con CSS se puede hacer básicamente todo, cualquier estructura imaginable y la que muestras es sencilla.

Enseñanos el código y la CSS que tienes y miramos que se puede hacer.

[hanscruz]

Primero gracias por responder.

En cuanto al diseño del css la tengo clara, cuando no utilizo position funciona perfectamente pero cuando deseo usar posiciones viene el problema,
en fin primero te dejo el codigo pruebalo y dime que solucion le encontrarias.

Código PHP:

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

Por favor nota que el div auxiliar deberia ir debajo del div principal ya que tiene posicion relativa, pero va arriba encima, talves sea algo muy sencillo o una simple linea pero pues eso es lo que necesito.

[Ricky77]

Creo que o no nos estamos entendiendo o no comprendo bien cual es tu pregunta, no obstante vamos a ver si he acertado:


Entiendo que en el código que me has pasado que lo que te molesta es el hecho de que el div auxiliar en llugar de quedarse abajo del mismo modo que está escrito en el html se suba para arriba cuando usas posiciones absolutas.

Si esto es así es completamente normal.

En el momento que le das a una capa un posicionamiento absoluto se vuelve "etereo", se pone a volar, no pesa, no tiene cuerpo y no hace ni ocupa espacio. Por lo tanto no es que el div auxiliar se suba para arriba, si no que como lo que tiene en su interior son capas con posición absoluta no las detecta y se queda en el tamaño mínimo.

para solucionarlo, o mejor dicho, para comprobarlo, tan solo has de darle un tamaño a las capas que contienen las capas absolutas, y así podrás ver que es lo que está pasando.

Mira aquí te pongo el ejemplo para que veas lo que te digo, tan sólo ábrelo con el navegador.

Código:

<html>
<head>

<style>
#contenedor {
	width: 800px;
	margin: 0 auto;
	background-color: #99CCFF;
	}

#principal {
    width: 750px;
    position: relative;
    background-color: #000000;
	 height: 250px;
	}

#auxiliar {
    width: 750px;
    background-color: #0000CC;
	 height: 100px;
	}
	
</style>

</head>
<body>

<div id="contenedor">
	
	<div id="principal">
		
		<div style="background-color: yellow; width: 700px; height: 100px; position: absolute; right: 0; top: 0px;">
		estan todos los otros divs pero todos con posicion absolute
		</div>
		
		<div style="background-color: red; width: 700px; height: 100px; position: absolute; right: 0; top: 100px;">
		estan todos los otros divs pero todos con posicion absolute
		</div>
		
	</div>

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

</div>  

</body>
</html>

Lo que más me sorprende de todo es que no acierto a entender porque quieres usar posicionamientos absolutos para un diseño tan simple. Quiero decir que creo que te complicas demasiado, sería mucho más efectivo y seguro hacerlo con capas normales con floats.

Si lo que ocurre es que no he entendido que es lo que te preocupa exactamente intenta exponerlo de un modo más didáctico porque no acabo de entender el problema que te preocupa

[hanscruz]

Me entendiste perfectamente pero como tu yo ya pense lo mismo ahi esta el problema ahora le puse mas contenido asi:

Código PHP:

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

Mira como vulve a suceder lo mismo.

Lo que pasa es que el div principal no tiene que tener un alto sino que tiene que adaptarse al contenido de los divs que estan dentro, he ahi el problema.

Pero como me lo temia y con tu explicacion creo que eso no se puede hacer por lo que ya explicaste y tambien lo que yo investigue, y si hubiera alguna solucion de hacerlo asi entonces seria interesante conocerla.

Nuevamente gracias por responder.

saludos

[Ricky77]

Si alguna vez tienes problemas con un div porque se te queda colgado arrriba en vez de bajar, una solución es colocar un <br clear="both" /> al final del mismo con eso le obligarás a estirarse hasta el final.

Pero en este caso efectivamente no va a responder.

Es una de las propiedades del "absolute". Cuando le das el valor absolute a una capa, se vuelve eso, absoluta, ignora todo lo que haya en diseño, es como si estuviese en otra dimensión, nada la empuja ni la retira, se queda flotando esperando a que le des un lugar donde colocarse.

Por eso no te entendía al principio lo que querías decir.


No obstante te vuelvo a repetir que no necesitas para nada usar absolutes en ese diseño.

Hay un momento en el que dices "el DIV1 tiene solamente DIVS con posición absoluta para que el diseño sea personalizable sólo con la CSS".

Esa afirmación es erronea , usar posiciones absolutas no hace ni mucho menos que un diseño sea personalizable sólo con la CSS.

Cualquier diseño que separe el contenido de hoja de estilo será personalizable sólo con la CSS siempre que el código sea correcto. De hecho el tuyo en concreto no sería personalizable sólo desde la CSS ni con posiciones ni sin ellas, ya que habías incluido parte de la CSS en el mismo código html a través de un <style =""> y por lo tanto deberías tocar el html para modificarlo.

Un saludo y siento no haberte sido de ayuda.