inline-block

Fuente: http://es.learnlayout.com/inline-block.html 

Puedes crear una cuadrícula de cajas que llene el navegador armoniosamente. Esto ha sido posible por mucho tiempo usando float, pero ahora con inline-block es aún más fácil. Veamos ejemplos con las dos opciones.

El método difícil (usando float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="box">
¡Estoy flotando!
</div>

<div class="after-box"> Estoy usando clear para no flotar arriba de las cajas.
</div>

El método fácil (usando inline-block)

Puedes logar el mismo efecto usando display: inline-block;

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div class="box2">
¡Soy inline block!
</div>

<div> En este caso no tengo que usar clear. ¡Bien!
</div>

Para soportar inline-block en IE6 y IE7 tendrás que trabajar extra. Algunas personas hablan de que inline-block desencadena algo llamado hasLayout, sin embargo, necesitarás saber eso solo si soportas viejos navegadores. Da click en el link anterior acerca de IE6 y IE7 si estás interesado en saber más. De lo contrario, continuemos con el siguiente tema.