Hacer crecer un DIV automáticamente

[daniloquispe]

Hola a todos:

Tengo un problema con una maqueta en XHTML/CSS:

Resulta que en esta maqueta se muestra en la parte inferior 3 bloques rectangulares con información destacada. Cada bloque es de un color entero (uniforme). Aquí una imagen de estos bloques:



El caso es que este web será programado, y debo considerar lo siguiente:

• Los bloques a mostrar no siempre serán 3
• Los bloques pueden aparecer en orden aleatorio
• El texto puede ser diferente en cada bloque

En lo que respecta a programación, estos puntos ya están resueltos, el tema es que cuando el texto de uno de los bloques es más largo que los otros dos, en los 2 bloques restantes queda un espacio en blanco al medio, como se puede ver en esta segunda imagen:



La forma como está maquetado es como sigue:

• Un div contenedor que encierra a los 3 (o menos) bloques
• Un primer div (dentro del contenedor) que encierra los 3 títulos
• Un segundo div que encierra las imágenes y texto de los 3 bloques
• Un tercer div que contiene los enlaces "ver más" de los 3 bloques
• Dentro de estos divs "secundarios", un div para cada título, un div para cada imagen y texto, y un deiv para cada enlace "ver más"

Adjunto el código HTML

Código HTML:

<div class="bloques">
  <div class="fila">
    <div class="celda1">Evento 1</div>
    <div class="celda2">Evento 2</div>
    <div class="celda3">Evento 3</div>
  </div>
  <div class="fila">
    <div class="celda1">
      <img class="imgflotante" src="imagen.jpg" width="98" height="119" alt="Imagen del evento" />
      <p class="textoevento">Considera positivo o negativo enjuiciar a un Presidente por atentar contra los Derechos Humanos? ¿Por qu&eacute;?</p>
    </div>
    <div class="celda2">
      <img class="imgflotante" src="imagen.jpg" width="98" height="119" alt="Imagen del evento" />
      <p class="textoevento">Considera positivo o negativo enjuiciar a un Presidente por atentar contra los Derechos Humanos? ¿Por qu&eacute;?</p>
    </div>
    <div class="celda3">
      <img class="imgflotante" src="imagen.jpg" width="98" height="119" alt="Imagen del evento" />
      <p class="textoevento">Considera positivo o negativo enjuiciar a un Presidente por atentar contra los Derechos Humanos? ¿Por qu&eacute;?</p>
    </div>
  </div>
  <div class="fila">
    <div class="celda1"><p class="derecha"><a href="vermas.php">+ ver mas</a></p></div>
    <div class="celda2"><p class="derecha"><a href="vermas.php">+ ver mas</a></p></div>
    <div class="celda3"><p class="derecha"><a href="vermas.php">+ ver mas</a></p></div>
  </div>
</div> 

Y el código CSS:

Código:

.bloques
{
    width: 765px;
    margin: 0;
    padding: 0 0 0 10px;
    height: auto;
    clear: both;
    float:left;
}
.fila
{
    float: left;
    height: auto;
    padding: 0;
    width:765px;
}
.celda1
{
    background-color: #D8D0B9;
    float: left;
    height: auto;
    padding: 5px 3px;
    width: 249px;
}
.celda2
{
    background-color: #DFDCD5;
    float: left;
    height: auto;
    padding: 5px 3px;
    width: 249px;
}
.celda3
{
    background-color: #EFECE7;
    float: left;
    height: auto;
    padding: 5px 3px;
    width: 249px;
}

Lo ideal sería que los divs que contienen la imagen y el texto de cada bloque ocupen siempre la altura que tenga el div "fila" que los contiene, pero he visto que en el segundo y tercer bloque esta altura es menor (porque el texto en estos bloques no es tan extenso) y por eso queda un hueco. ¿hay alguna forma de hacer que estos 3 divs se estiren y que sean siempre de la altura del div "fila" que los contiene?

Espero haberme explicado bien. Gracias.

[chichote]

Lo mas simple es q utilices min-height, con el que le estableces el temaño minimo del div.

min-height: 500px;
height:auto !important;
height: 500px;

y tambien tienes mas soluciones, dependera el uso de una u otra segun tu maqueta

http://elmanusito.wordpress.com/2008...css-height100/

saludos.

[a77icu5]

Si los bloques no siempre seran 3...creo que deberias hacer el width por porcentaje y este calcularlo dependiendo el numero de bloques a mostrar, en cuanto al height creo que la duda ya quedo resuelta con el uso de min-height...suerte !

[daniloquispe]

Hola a todos:
Gracias por sus sugerencias, las he probado pero ninguna ha dado el resultado esperado. Tendré que modificar mi maqueta.
Gracias de todos modos