Como crear columnas con CSS de forma fácil mediante Inline-block y float

Como crear columnas con CSS de forma fácil mediante Inline-block y float

Print Friendly, PDF & Email
Como crear columnas con CSS de forma fácil mediante Inline-block y float
Valora esta entrada
Supongamos que te estás planteando una maqueta web y estás en la fase de dar estructura a tu documento web.

Decides que habrá un <header>, un <main>, un <aside> y un <footer>

Dibujas un primer croquis y has pensado que estaría bien distribuir el espacio en algo parecido a la imagen.

¿Cómo lo hacemos?

web fácil con html5 y css

Hay muchas formas de hacerlo. En esta publicación vamos a ver dos.

Veamos el código html y css de partida para hacerlo. La idea es que en cada apartado vamos a añadir el código necesario faltante.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Maquetado básico de una web usando inline-block">
        <meta name="author" content="Francesc Ricart">
        <title>Maquetado de una página mediante inline-block</title>
        <style>
            *{
                margin:0;
                padding:0;
                box-sizing:border-box;
                font-size:0;
            }
            
            header, main, aside, footer{border:1px solid #000;}
            header{background-color:#00ff00;}
            main{background-color:#0000ff;}
            aside{background-color:#ffff00;}
            footer{background-color:#cccccc;}
            
            h1{font-size:18px;}
            p{font-size:14px;}
            
            .wrapper{
                width:95%;
                max-width:1100px;
                margin:auto;
            }
       /*inicio código necesario para dar aspecto columnas*/

          
        </style>
    </head>
    <body>
    <div class="wrapper">
        <header><h1>Contenido cabecera de la web</h1></header>

        <div class="contenedor">
            <main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam harum quae tenetur cumque modi error nihil mollitia. Deserunt eligendi aut excepturi debitis nisi, minima voluptates tenetur a omnis, expedita fugit!</p></main>
            <aside><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias nobis pariatur non.</p></aside>
        </div>

        <footer><p>@francescricart - textos legales y redes sociales</p></footer>
    </div>
    </body>
</html>

Crear columnas haciendo uso de inline-block

La primera de las estrategias de esta publicación hace uso de la propiedad inline-block; por la cual una caja se apila al lado de la anterior siempre y cuando tenga espacio suficiente.

Para asegurarnos que siempre habrá sitio se usan las unidades porcentuales.

.contenedor{position:relative;}
main,aside{display:inline-block;}
main{width:60%;}
aside{
      width:40%;
      position:absolute;
      top:0px;
}

Si seguís el código y lo vais escribiendo en vuestro ordenador veréis que aside deja un hueco en la parte superior. Para evitar que esto suceda se le da un position:absolute; y un top:0px; pero para que no se mueva respecto el body a la caja .contenedor es necesario darle un position:relative;

Además, es posible que lo estéis escribiendo y no os queden una columna al lado de la otra. Esto puede ser porqué el navegador tiene escrito por defecto un espacio de separación entre elementos bloque. Para corregirlo se ha escrito en el selector universal el código

font-size:0;

y a continuación se ha escrito para cada etiqueta html (<h1> y p>) el tamaño de fuente específico que le queremos dar.

Crear columnas mediante posicionamiento flotante

.contenedor{}
main,aside{float:left;}
main{width:60%;}
aside{width:40%;}
footer{clear:both;}

En este caso se crean las columnas mediante un posicionamiento flotante.

Fijaros que el footer requiere un clear:both; para asegurarnos que el footer siempre empiece en el nivel inmediatamente posterior. Para ilustrarlo podéis mirar de reducir el ancho de disponible de vuestro navegador.

¡Hola!

Querido lector,

No hay una única forma de crear columnas en CSS. Cada estrategia tiene sus puntos a favor y conviene conocerlas todas.

Espero que este contenido te haya podido ser de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejemplo de centrado vertical y horizontal con CSS
- 51
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Como centrar un texto mediante CSS y no con HTML
- 162
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Dimensiones reales de una caja en CSS
- 110
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 20
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Concepto de cascada en CSS
- 141
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Ejemplo de centrado horizontal de una caja con CSS
- 232
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Colores CSS para web
- 294
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Como mezclar CSS y HTML. Acoplamiento CSS
- 158
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Selectores CSS. Que son y como usarlos
- 146
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.