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;
}