CSS: ¿Mas de 3 divs inline?

Pues el método para alinear divs es igual para 3 o más de 3.

#contenedor{position:relative; display:table;}

#hijo1{position:relative;float:left; width:100px;}
#hijo2{position:relative;float:left; width:100px;}
#hijo3{position:relative;float:left; width:100px;}
#hijo4{position:relative;float:left; width:100px;}
#hijo5{position:relative;float:left; width:100px;}

<div id="contenedor">
<div id="hijo1"></div>
<div id="hijo2"></div>
<div id="hijo3"></div>
<div id="hijo4"></div>
<div id="hijo5"></div>
</div>
<div style="clear:both;"></div>

El clear both es para limpiar flotabilidades, super importante.

Los span son elementos de líena, es decir, se apilan de izquierda a derecha ellos solos. Si el último elemento de la derecha no cabe en la líena, parte de él se escribirá a la izquierda de la linea de abajo.

Los DIV son elementos de bloque, que por defecto ocupan todo el ancho del padre que los contiene. Si no especificas ningún tamaño al padre, o al padre del padre, ecétera, cogerán el ancho que tenga en ese momento el navegador. Esto quiere decir que si quieres crear una web que SIEMPRE muestre tres columnas, una de dos:
-Le dices un tamaño width al padre contenedor de las columnas (o sus antecesores (padre del padre, etc)), y juegas con el width,margin y padding de los hijos para que quepan en una sola linea. Si el navegador ocupa menos del ancho de la capa contenedora, creará barra horizontal de scroll, que es bastante incómoda.
-Utilizas porcentajes relativos (%). Por ejemplo, width:33% a 3 DIVS creará 3 columnas, 25% 4 columnas, etc. No creará nunca barra de scroll horizontal, pero cuesta más hacer posicionar los elementos si la página tiene muchas cosas.

Para crear "columnas" con divs se em ocurren varias posibilidades, pero te pongo las 3 más comunes:
-Los divs tienen diferentes tamaños de alto: Utiliza float.
-Los divs son iguales: Utiliza inline-block. Este además te permite centrar los divs en el eje X de la página, es decir, reparte el margin de forma constante entre todos los divs.

Ejemplo float:

div#contenedor{ width: 550px; background-color:red; padding:10px; margin: 0 auto;}
div.hijo{float:left; background-color:green; border:2px solid black; width:100px; height:100px; }
div.clear{clear:both;}

<div id="contenedor">
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
<div class="clear"></div>
</div>

El "clear" hay que meterlo dentro de la capa contenedor, para que estire la capa contenedor. Si no, el alto de las capas hijas flotantes no "estirará" el alto de la capa padre, y si esta tiene algun color de fondo o imagen background, se verá feo. Por eso he puesto colores a las capas, así se puede ver la diferencia entre poner el clear dentro o fuera de la capa padre.

Ejemplo inline-block:

div#contenedor{ width: 550px; background-color:red; padding:10px; margin: 0 auto; text-align:center;}
div.hijo{display:inline-block; background-color:green; border:2px solid black; width:100px; height:100px; }

<div id="contenedor">
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
<div class="hijo"></div>
</div>

Así no necesito la capa "clear", y ahora al ser las capas elementos de línea, puedo colocarlos con text-align left, center o rigth, más fácil que con float. El problema de esta solución es que algunos navegadores viejos, como el explorer versión 7 y anteriores, no cumpen los estándares de la web y no los entienden, con lo que la web se vería mal.

#7 porque quieres evitar clears si son dios?

Mirando un poco de CSS me ha surgido una duda, aunque he llegado a leer que no se puede hacer:

Si tenemos un esquema de divs:

[_header_]
[bar][body]
[_footer__]

¿Como se podría hacer que "bar" ocupe todo el espacio vertical igualando el tamaño de body? Es decir, que bar llegue hasta footer.
En el manual ponía que lo que se suele hacer, y ciertamente lo he visto en muchos sitios, es poner una imagen de fondo que imite el estilo de "bar", por lo que da la sensación de que "bar" ocupa todo (tiene la misma altura que body).

Esta página te explica todos los métodos (JavaScript, falsa columna o hack CSS) para hacer columnas del mismo alto. Si no entiendes alguno de los métodos te los resumo en español.

http://www.ejeliot.com/blog/61

#9 SPAM ¿Height dinámico? Resume el codigo de lo que dices a la minima expresion y te diré por qué falla