Crear columnas con el mismo alto IE-7

readme.md

Same height columns

Crear columnas con el mismo alto usando el modelo flexbox con soporte para Internet Explorer 7

1. Objetivo y descripción
2. Dependencias
3. Puesta en marcha
4. Referencias
5. Créditos y autor

Objetivo y descripción

Internet Explorer 7 no permite generar columnas con el mismo alto, sin embargo usando flexbox podemos lograr esto.

Dependencias

• Flexiejs - Cross-browser support for the Flexible Box Model
• JQuery - Write less, do more.

Puesta en marcha

1. Copia el archivo jquery.js dentro de la carpeta js de tu proyecto y agrega la librería en el header del archivo html.

	<script src="js/jquery.js"></script>

2. Copia el archivo flexie.min.js dentro de la carpeta js de tu proyecto. Ya que los navegadores modernos (ie10+) soportan flexbox la librería sólo se llamará cuando el navegador sea menor a ie10.

En el header del archivo se debe llamar a la librería de la siguiente manera:

    <!--[if (gte IE 7)&(lte IE 9)]><script src="js/flexie.min.js"></script><![endif]-->

3. El markup general para las columnas debe ser el siguiente:

    <div class="contenedor">
        <div class="elemento uno"><p>Box 1</p></div>
        <div class="elemento dos"><p>Box 2</p></div>
        <div class="elemento tres"><p>Box 3</p></div>
    </div>

4. La hoja de estilos debe tener mínimo los siguientes lineamientos:

    .contenedor{
        display: box;
        display: flex;
        display: -moz-flex;
    }
    .elemento{
        float: left;
        -moz-box-flex : 1;
        -webkit-box-flex : 1;
        box-flex : 1;
    }

Referencias

• Referencia 1:
  • FLEXIE
• Referencia 2:
  • CSS Tricks

Créditos y autor

• Autor del snippet: Geny Miranda @geny_geny
• Los snippets pertenecen a KamikazeLab