Ancho mínimo para elementos de bloque con CSS

Para especificar un ancho mínimo para elementos de bloque con CSS es tán fácil cómo usar la propiedad CSS min-width pero en Internet Explorer tenemos un importante bug que no soporta esta propiedad.

Esta es un propiedad muy útil, por ejemplo cuando estamos creanado un diseño con un acho fexible con esto evitamos que se contraigan los elementos más de lo deseado. la forma de utilizar esta propiedad es la siguiente min-width: 300px; esto nos dice que el elemento no se puede contraer menos de 300 pixeles pero si más.

Pero ¿qué pasa con Intentet Explorer 6 e inferiores?, necesitamos de un hack o lo evitamos utlizando este fabuloso script llamado IE7, pero si quieres evitar el uso de javascript esta es la forma sucia.
Por ejemplo tenemos un div con la clase (class) container.

.container {

 min-width:300px;

}

Para que esto funcione en Internet Explorer 6 necesitamos un poco de esfuerzo extra, para empezar creamos dos div’s uno denro del otro.

<div class=”container”>

 <div class=”holder”>Contenido</div>

</div>

Ahora el hack para Internet Explorer es el siguiente:

* html .container {

 border-right: 300px solid #FFF;

}

* html .holder {

 display: inline-block;

 position: relative;

 margin-right: -300px;

}