Compartir:

¿Como desarrolladores de sitios web, no sé a encontrado con la necesidad de acomodar elementos en forma horizontal (como crear una página con dos o mas columnas), principalmente cuando se trabaja con divs?

La solución que se nos viene a la cabeza es “Float” y “Clear“, que son dos propiedades que definimos con css.

Veamos como acomodamos 3 cajas (div) en forma horizontal utilizando estas dos propiedades.

Primero creamos el html con la estructura necesaria:

Creamos un div contenedor y le asignamos una clase llamada “content”, dentro de contenedor colocamos 3 div mas con una clase llamada “cajasFloat”.

Luego definimos los estilos de la siguiente manera.

Explicamos primero el segundo class.  CajasFloat tiene definido la propiedad que estamos analizando que es es float, para este ejemplo esta en “float:left“, también puede estar en “float: right” y “float: none“, podemos utilizar cualquier valor de esta propiedad según la necesidad.

El resultado de esto es:


Como ustedes notarán el contenedor no se ve, este esta definido en gris claro y debería encerrar las 3 cajas. Esto sucede porque colocamos los elementos como flotantes, es aquí donde entra la propiedad “clear“.

La propiedad clear no ayuda a “romper” el esquema flotante de float (vale la redondancia) y el contenedor se ajusta al tamaño del contenido.

La propiedad clear tiene los siguientes valores:

  • Left: rompe con el esquema de orden para los elementos con “Float:letf”.
  • Right: rompe con el esquema de orden para los elementos “Float:right”.
  • Both: se rompe el esquema de orden para cualquier elemento float.

Para este ejemplo definimos la clase clear de la siguiente manera:

Ahora en la estructura html colocamos un div y le asignamos la clase “clear” creada anteriormente, el div lo colocamos al final de los 3 elementos “cajasFloat”, de la siguiente manera:

Esto nos dará como resultando, que el contenedor aparezca y encierre debidamente a los tres elementos.

Ver ejemplo

Ahora veamos el mismo trabajo pero con INLINE-BLOCK.

Utilizando la misma estructura html que el ejemplo anterior, pero sin el div clear.. jejeje.

Se define una clase “cajasInline” para cada div dentro del “content”.

Luego creamos la clase de la siguiente manera:

utilizando la propiedad “display” con el valor “inline-block“, podemos realizar la misma acción que con el float:left.  Pero es este caso no es necesario definir un div class “Clear“.

El resultado es el siguiente:

Como pueden notar el trabajo es menor, nos ahoramos una clase y div menos, esto en proyecto mas grande nos va a ayudar a tener menos código.  Para los que se preguntas si esto funciona en Internet Explorer, pues la respuesta es si funciona por lo menos para la versión 8, la versión 7 no  🙁

Ver ejemplo

Hablemos ahora de la propiedad display:

La propiedad display define como un elemento de HTML se debe mostrar.

Estas son algunos valores de la propiedad display:

  • None: el elemento no se muestra del todo.
  • Block: El elemento se muestra como un elemento bloque (como parrafos y encabezados). Un elemento de bloque tiene algunos espacios en blanco por encima y por debajo de él.
  • Inline: Este es la opción predeterminada. El elemento se muestra como una elemento en linea (como span).  un elemento inline no tiene ningun salto de línea antes o despúes de ella.
  • Inline-Block: El elemento se coloca como un elemento en línea (en la misma línea como el contenido de al lado), pero se comporta como un elemento de bloque.
  • list-item: El elemento se muestra como una lista de items, lo que significa que tiene un bullet en frente.
  • run-in: El elemento se muestra como un bloque o un elemento en línea, dependiendo del contexto.
  • Table: El elemento se muestra como una tabla.
  • Inherit: El valor de la propiedad display se hereda del elemento padre.

Display tiene mas elementos tales como: table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group.

Agradezco a mejorandola, viendo un videotutorial de ellos escuche hablar de inline-block e investigue un poco para traerles este tutorial sobre el tema.

Algo importante es que utilizamos la propiedad vertical-align, para la alineación de los elementos.

Espero les ayude bastante!!!

Artículo escrito por: Hanzel Mata R.

Por si desea colaborar:





2 pensiamientos en “Utilizar inline-block en lugar de Float

Comentarios cerrados.