4 divs que ocupen 100% y con margen entre ellos?

[chocovo]

Hola,

Estoy intentado hacer una web que se ajuste al tamaño de la pantalla...

En ella quiero poner 4 divs alineados horizontalmente que ocupen en total el 100% del ancho de la pantalla.

De momento tengo:

Código HTML:

<div id="div25">aaa</div><div id="div25">bbb</div><div id="div25">bbb</div><div id="div25">ddd</div>

y el css #div25{width:25%; padding:0px; text-align:center; float:left;}

El caso es que quiero que entre los DIVs haya algún espacio por lo que si pongo padding: 10px ó margin: 10px, el último div ya no cabe y se baja.

¿Cómo hacer para que los 4 divs quepan uno al lado del otro y tengan alguna separacion entre ellos?

Gracias y un saludo

[Mariano_Floyd]

Hola, antes que nada, no pueden haber dos elementos con el mismo id, para eso existen las clases.
Segundo, si quieres agregar texto, lo ideal seria que uses etiquetas adecuadas para ello, por ejemplo:
<div class="bloque">
<p>hola</p>
</div>

Por ultimo y dándole solución a tu problema, agrega en el css:
box-sizing:border-box;

Aquí lo observaras mejor:

http://jsfiddle.net/2T7aV/

[Rafael]

Si usas porcentajes puedes poner

{width: 23%; margin: 0px 1%;}

Otra maravilla es poner

{box-sizing: border-box; padding: 0 1%;} (también puedes usar px en este caso)

Y otra que va a ser interesante en un futuro es

width: calc(25% - 60px); margin: 0 30px;}

Y así puedes poner el margen en pixeles.

Edito. Te me adelantaste Mariano.

[pzin]

Yo la solución que aplicaría sería la de Rafael, la de usas calc(). Para mi IE8 está prácticamente muerto y en IE9 "ya" funciona calc(). Así que personalmente no lo veo tan futurista.

Otra opción que tienes, que yo suelo usar en un pequeño sistema de grillas, es crear contenedores, box-sizing y padding-right:

Código HTML:

<div id="contenedor">
    <div class="col1-4">
        <div>Hola</div>
    </div>
    <div class="col1-4">
        <div>¿Cómo</div>
    </div>
    <div class="col1-4">
        <div>estás</div>
    </div>
    <div class="col1-4">
        <div>hoy?</div>
    </div>
</div>
 

Código CSS:

div#contenedor {
    padding-left: 10px;
}
 
div.col1-4 {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding-right: 10px;
}
 

Puedes verlo aquí.

Aunque como digo, prefiero usar calc.

[Rafael]

Lo de futurista lo digo por algunos dispositivos móviles.