Ocupar ancho de página

[cristian_cena]

Hola elacunza.
Básicamente podrías hacerlo de tres maneras:

La primera: (La que quieres evitar):
Dando un margen a los elementos y un padding al contenedor

Código HTML:

<div id="elems">
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
</div>
 

Código CSS:

​*{outline:1px solid cyan;}
#elems{
    width:390px;  /* w: 130 * 3 */
    overflow:hidden;
    background:gray;
    padding:10px 0 0 10px; /* top y left*/
}
.el{
    background:gray;
    float: left;
    width: 100px; 
    padding:10px;
    margin:0 10px 10px 0; /* right y bottom */
    /* total width: 100 + 20 + 10 */
}
 

La segunda:
Quitando el margen de los elementos mediante una clase

Código HTML:

<div id="elems">
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el cero">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el">lorem ipsum dolor amet...</p>
    <p class="el cero">lorem ipsum dolor amet...</p>
</div>
 

Código CSS:

​*{outline:1px solid cyan;}
#elems{
    width:380px;  /* (100 + 20 + 10) * 3 - 10  */
    overflow:hidden;
    background:gray;
}
.el{
    background:gray;
    float: left;
    width: 100px; 
    padding:10px;
    margin:0 10px 0 0; /* right y bottom */
}
 
.cero{
    margin:0; 
}​​​
 

La tercera:
Anidando el contenedor de los elementos en una caja con overflow:hidden en la que restas el tamaño de la última columna

Código HTML:

<div id="wrap">
    <div id="elems">
        <p class="el">lorem ipsum dolor amet...</p>
        <p class="el">lorem ipsum dolor amet...</p>
        <p class="el">lorem ipsum dolor amet...</p>
        <p class="el">lorem ipsum dolor amet...</p>
        <p class="el">lorem ipsum dolor amet...</p>
        <p class="el">lorem ipsum dolor amet...</p>
    </div>
</div>​
 

Código CSS:

*{outline:1px solid cyan;}
#wrap{
    overflow:hidden;
    width:380px;  /* w: 390 - right*/
    background:red;
}
#elems{
    width:390px;  /* w: 130 * 3 */
    overflow:hidden;
    background:gray;
}
.el{
    background:gray;
    float: left;
    width: 100px; 
    padding:10px;
    margin:0 10px 0 0; /* right = 10*/
    /* total width: 100 + 20 + 10 */
}
 

Saludos.


​