Capas horizontales en HTML y CSS

15 febrero, 201915 febrero, 2019 Javi 0 comentarios CSS, HTML

Muchas veces necesitamos posicionar en la misma línea varios elementos en HTML. A continuación dejo el código necesario para que con un código html muy sencillo y a través de CSS con float, se posicionen la capas en horizontal, dentro de la misma línea.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Capas horizontales</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
    <div id="general">
        <div id="izq">
        </div>
        <div id="cen">
        </div>
        <div id="der">
        </div>
    </div>
</body>
</html>

En el HTML vemos como hay una capa general y dentro otras tres capas que queremos que una se ponga a la izquierda, otra en el centro y la última a la derecha.

*{
    margin: 0px;
    padding:0px;
}
div#general{
    margin:auto;
    margin-top:10%;
    height:  300px;
    width: 75%;
    border:1px solid blue;
}
#izq{
    height:  300px;
    width: 33%;
    background-color: red;
    float:left;
}
#cen{
    height:  300px;
    width: 33%;
    background-color: green;
    float:left;
}
#der{
    height:  300px;
    width: 34%;
    background-color: purple;
    float:left;
}

Lo primero que hacemos es inicializar el margin y el padding de todo el documento.

*{
    margin: 0px;
    padding:0px;
}

A continuación marcamos las características del marco exterior, marcando un ancho fijo de 300px pero un ancho al 75%

div#general{
    margin:auto;
    margin-top:10%;
    height:  300px;
    width: 75%;
    border:1px solid blue;
}

Luego ya creamos los estilos de los tres bloques internos, todos del 33% (que supone el 33% del 75% de la capa superior) y lo mas importante, el float, que hace ajustarse la caja en la misma línea.

#izq{
    height:  300px;
    width: 33%;
    background-color: red;
    float:left;
}
#cen{
    height:  300px;
    width: 33%;
    background-color: green;
    float:left;
}
#der{
    height:  300px;
    width: 34%;
    background-color: purple;
    float:left;
}