Altura minima (min-height) de bloques a traves de CSS
Ricardo Aroca | 01 de agosto de 2005 | 
16 comentarios
Un problema muy común cuando se trabaja con bloques div, es el de especficar una altura mínima para ellos. Esta situación se da generalmente cuando se tiene una imagen que flota junto a un texto que lo acompaña; si el texto no tiene la altura de la imagen, el contenido de la página que esté bajo el texto, también se mostrará a la derecha de la imagen, debido a que el div que los contiene toma la altura del texto.
La solución es especificar una altura mínima para un cuadro (div) que contenga a la imagen y el texto.
Código XHTML
<div class="box">
<img src="img-ejemplo.gif" width="100" height="125" />
<p>Colocar aquí el contenido para class "box"</p>
</div>
Un div sirve como contenedor de una imagen y un párrafo de texto. No puede ser más simple.
Código CSS
.box{
min-height: 125px;
height: auto !important;
height: 125px;
padding:5px;
}
.box img{
float:left;
}
.box p{
margin-left:135px;
}
Las líneas destacadas son las que establecen la altura mínima al contenedor. La propiedad min-height, establece una altura mínima para un elemento; esta propiedad no funciona en Internet Exploreres, ya que en realidad entiende el atributo hight como un min-height, por lo tanto establecemos height: 125px. Para que los navegadores que si entienden correctamente los atributos height y min-height, como Firefox, no tengan una altura fija (ya que hemos establecido que la altura es 125px), ocupamos height: auto !important, estableciendo una altura automática y dándole mayor prioridad a esta declaración sobre la otra a través de la declaración !important (que no es entendida por Internet Explorer).
