colocar tres contenedores dentro de uno

[noctovision]

Hola, cual seria la manera mas correcta de colocar tres contenedores dentro de uno centrado y que se coloquen bien distribuidos, con espacios entre ellos?

http://grab.by/A5Ma

y es lo que tengo:

http://www.yacobi.pl/highschool/

Gracias de antemano

[Luminis]

Yo lo hago así:

NOTA: no lo estoy probando, es apenas algo que recuerdo.

Código HTML:

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

Código CSS:

#contenedor {
/* formato para el contenedor principal (el que contendrá a los otros 3) */
vertical-align: top;
}
 
.distribucion {
/* Formato para los 3 contenedores */
display: inline-block;
}
 

Con esto los 3 contenedores deberían quedar en el top del contenedor principal, y si a esos 3 contenedores les colocas un width que no se pase del width del contenedor principal, estos quedarán alineados uno al lado del otro en el top del contenedor principal.

[webosiris]

Hola, lo que dice Luminis no te va a funcionar, honestamente creo que no entendió bien la pregunta.

lo que tu quieres hay varias formas de hacerlo, pero lo más sencillo es darles un margin y al 3° elemento sacárslo. Algo así:

Código CSS:

.services li{
width:30%;
float:left;
margin-right:5%;
}
.services li:nth-child(3n){
margin-right:0;
}
 

[Luminis]

Bueno yo entendí que quería un contenedor (centrado) con otros 3 dentro y distribuídos:

Hice esto a ver si es lo que busca:

Código HTML:

<section>
    <div></div>
    <div></div>
    <div></div>
</section>
 

Código CSS:

section {
    width: 900px;
    height: 600px;
    background-color: #191919;
    margin: 10% auto auto;
    text-align: center;
}
 
div {
    width: 250px;
    height: 250px;
    background-color: red;
    display: inline-block;
    margin-top: 20%;
}
 

[webosiris]

Luminis, el código de tu segundo mensaje evidentemente está más trabajado y es diferente que el de tu primer mensaje, pero aún así no es lo que noctovision busca, mira el ejemplo que puso, la distancia entre los 3 bloques es mucho mayor que un pequeño espacio como el tuyo (el espacio de tu ejemplo es provocado por como funciona el block-inline, pero no puede ser personalizado) y para eso es necesario usar margin (pero si no se lo sacas al último elemento, dejan de estar centrados)

Además que de la forma que muestro en mi mensaje, la única medida fija que hay que dar es la del contenedor, al estar todo lo demás en porcentajes los bloques siempre ocupan 1/3 del contenedor, lo que hace que sea una solución mucho más flexible.