Boxes (cajas) flotan una al lado de la otra

Boxes (cajas) flotan una al lado de la otra

Os dejamos un ejm de 3 cajas flotando una al lado de la otra utilizando las propiedades float y clear.

El código sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix.::after {
content: "";
clear: both;
display: table;
}
</style>
</head>

<body>
<h2>Grid de cajas (Boxes)</h2>
<p>Cajas flotan una al lado de la otra</p>
<div class="clearfix">
<divclass="box"style="background-color:#bbb">
<p>Texto 1</p>
</div>
<divclass="box"style="background-color: #ccc;">
<p>Texto 2</p>
</div>
<divclass="box"style="background-color: #ddd;">
<p>Texto 3</p>
</div>
</div>

</body>
</html>

El resultado sería el siguiente:

Sutil Web
Sutil Web - Tu sueño hecho diseño

Suspendisse ultricies ultrices viverra. Morbi rhoncus laoreet tincidunt mauris interdum convallis metus suspendiss lacus est.