Foros del Web » Diseño web » CSS »

Hacer crecer un DIV automáticamente

Estas en el tema de Hacer crecer un DIV automáticamente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2010, 12:13
Avatar de daniloquispe  
Fecha de Ingreso: mayo-2007
Mensajes: 38
Antigüedad: 7 años, 3 meses
Puntos: 0
Hacer crecer un DIV automáticamente

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.
  #2 (permalink)  
Antiguo 14/05/2010, 12:52
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.754
Antigüedad: 9 años, 8 meses
Puntos: 128
Respuesta: Hacer crecer un DIV automáticamente

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.
__________________
Web 2.0 es verbo, no sustantivo
  #3 (permalink)  
Antiguo 15/05/2010, 16:58
 
Fecha de Ingreso: agosto-2008
Ubicación: Puebla, Mexico.
Mensajes: 84
Antigüedad: 6 años
Puntos: 0
Respuesta: Hacer crecer un DIV automáticamente

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 !
  #4 (permalink)  
Antiguo 26/05/2010, 15:08
Avatar de daniloquispe  
Fecha de Ingreso: mayo-2007
Mensajes: 38
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Hacer crecer un DIV automáticamente

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

Etiquetas: crecer
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:02.
SEO by vBSEO 3.3.2