Estimados:
Recurro a ustedes para buscar solución y consuelo frente a semejante drama.
Tengo dos contenedores (div) de igual tamaño y posición que se superponen mediante el uso de z-index, requisito necesario para que el objetivo de diseño se cumpla. Hasta ahí ningún problema.
Datos necesarios: En el contenedor superior (que llamaremos amistosamente "capa 1") tengo texto y otra información dinámica. En la capa inferior ("capa 0") tengo sólo un fondo.
EL PROBLEMA: Necesito que cuando la "capa 1" crezca debido a su contenido, la "capa 0" también crezca, lo que actualmente no sucede por ser contenedores independientes el uno del otro.
MAS INFO: Debido a las características, no es posible meter la "capa 1" dentro de la "capa 0", deben permanecer independientes.
LO QUE SE BUSCA IDEALMENTE:
Una solución mediante CSS. Sé que se puede hacer mediante JavaScript, pero no es la idea. El ideal es solucionar todo mediante hojas de estilo u otra solución potente y rápida para los distintos navegadores.
Muchísimas gracias a todos los que me puedan ayudar ya que llevamos un buen rato machucandonos la cabeza con esto.
Saludos a todos!
codigo css:
Código PHP:
#main-content {
color: #666666;
float: left;
font-size: 12px;
height: auto;
width: 701px;
margin: 0 auto 0 auto;
padding: 0;
}
#main-center {
background-color: transparent;
background-image: url(imagenes/pattern3.jpg);
background-position: center;
background-repeat: repeat-y;
position:relative;
margin: 0 auto 12px auto;
padding: 0;
width: 701px;
min-height: 422px;
height: auto !important;
height: 422px;
z-index:0;
}
#main-center-z {
background-color: transparent;
position:absolute;
top: 120px;
width: 701px;
min-height: 422px;
height: auto !important;
height: 422px;
margin: 0 auto 0 auto;
padding: 0;
z-index:1;
}
codigo html:
Código PHP:
<div id="main-content" >
<div id="main-center-z">
<p>Aquí va el contenido del centro</ p>
<p>Probando alto centro</ p>
<p>Probando 2</ p>
<p>Probando 3</ p>
</div>
<div id="main-center"></div>
</div>