La cuestión es que el inline-block, al actuar como un elemento de linea te lo alinea verticalmente con valor por defecto : baseline
Ref:
http://librosweb.es/libro/css/capitulo_6/texto_2.html
Entonces ese corrimiento hacia abajo es simplemente que el elemento queda alineado en su linea base.
Para ubicarlo arriba debes cambiar el valor de vertical-align a "top".
Código CSS:
Ver original#uno{
width: 490px;
height: 190px;
display: inline-block;
margin: 4px;
border: 1px solid black;
vertical-align: top;
}
Y lo mismo debes hacer con #cuatro y #cinco y todos aquellos que creas conveniente y que tengan su display como inline-block.
Ahora, cuando le agregas el position:absolute a p, posiciona en párrafo en las coordenadas (0,0) dado que no le has indicado otras coordenadas. Además, y de esto no estoy seguro, pero creo que al declararle un display a su padre toma el origen en el vértice superior izquierdo del mismo y por eso ya no le hace caso al baseline, que es lo que sucedería sí el contenedor padre tuviera definido su position distinto al stactic.
Ref:
http://librosweb.es/libro/css/capitu..._absoluto.html
Como recomendación, no utilices el position:absolute a menos que sea absolutamente necesario posicionar con mucha exactitud algún elemento.
No coincido con pzin en cuanto a que float sea más robusto que display inline block, ya que float ha sido creado para ubicar imágenes a las que las rodea un texto, emulando las ilustraciones de un libro impreso. Pero también es cierto que display inline block también tiene sus cosas.
Pero como todo en CSS, se utilizan las herramientas que tenemos a mano para lograr lo que necesitamos. Antes se maquetaba con tablas, luego con float, hoy hay muchas otras maneras, aunque se debe revisar constantemente el soporte que le dan los navegadores y las necesidades de los proyectos.
Te dejo un link donde podrás informarte y aprender sobre css y como maquetar:
http://ksesocss.blogspot.com/2012/11...te-futuro.html