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
5 (100%) 1 voto

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? 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.