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

2
(4)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

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

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?
Como crear columnas con CSS de forma fácil mediante Inline-block y float 2
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!

  1. Avatar de Ferran

    Ok, Francesc,
    Ahora a practicar un poco
    Gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *