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é?</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é?</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é?</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.