estructuras con float

Es muy común hacer estructuras completas usando float. Aquí está la misma estructura que usamos con position hace rato, pero usando float. 

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}
<div class="clearfix">
<section>

Este ejemplo funciona igual que el otro. Fíjate que pusimos un clearfix en el contenedor. No se necesita en este ejemplo, pero se necesitaría si nav fuera mas largo que el contenido no flotado.

</section>
<section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>
  • Creative Commons License