Is there a way to have a specific spacing between and take up the full width in a responsive design?

Question

So I have three divs and I would like all three of them to take up the full width of their container and have a specific margin between them.

<div class="container">
    <div class="foo">
        content
    </div>
    <div class="foo">
        bit more content
    </div>
    <div class="foo>
        Very much more content
    </div>
</div>

And my CSS looks something like:

.foo { 
   width: 31%; 
   margin-left: 10px;
}
.foo:first-child { 
   margin-left: 0px;
}

However, with this set up the divs will wrap when the page gets too small and the divs will not stretch to the edge when the page is too big.

Is there an easy way to have a CONSTANT margin between them (no 'margin-left: 3%') yet still have the three divs stretch evenly across no matter the size of the page?

EDIT From the first answer, I took the idea of putting the padding inside of the div making it accounted for as part of the width and modified it a bit to use css that is more fully supported across all browsers.

So as long as the container of the three divs remains greater than 120px, the spacing between the divs in this example will always be a constant 16px. Also, no matter the size of the outer container, the inside divs will always take up the entire width of the three containers.

Example: http://jsfiddle.net/U8U7D/5/

Answer 1

You could try adding a padded container around each div that uses box-sizing:border-box and position:relative. A hard padding on these containers will then be incorporated into the max-width that each div will inherit. Thus, you could specify some constant "margin" (or rather, "parent padding") and still have the divs stretch evenly.

In terms of browser support, I would argue that box-sizing:border-box is fine (source). Chris has a good blog post on it. (The alternative would be writing a JavaScript function that re-calculated the width from the padding and border -- so you're really just saving yourself a headache.)

Here's some sample HTML describing what I mean:

<div class="container">
    <div class="fooContainer">
        <div class="foo">content</div>
    </div>
    <div class="fooContainer">
        <div class="foo">bit more content</div>
    </div>
    <div class="fooContainer">
        <div class="foo">
           Very much more content
        </div>
    </div>
</div>

Here is the commented CSS explaining what is going on:

.fooContainer {
    width: 30%;
    position: relative; /* Restrain children max-widths to this width. */
    display: inline-block; /* "Show divs on the same line." */
    box-sizing:border-box; /* Include padding+border in width calculation. */
    padding: 0px 40px;  /* Just an example padding. */
}

Example Fiddle

NOTE: In terms of responsiveness, the page scales appropriately until you reach the point where the text literally just can't fit; you could fix that be just letting the containers overflow or by setting some minimum width -- but I leave that design choice to you.

Answer 2

Tables solution: http://jsfiddle.net/h29JS/ (will work in old browsers).

.container {
    display: table;
    width: 100%;
}

.container > div {
    display: table-cell;
    width: 33.3%;
    outline: 1px solid red;
}

.container > div + div {
    padding-left: 10px;
}

Flexbox solution: http://jsfiddle.net/gmcjw/.

.container {
    display: -webkit-flex;
    display: fex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.container > div {
    -webkit-flex: 1 1 33%;
    outline: 1px solid red;
}

.container > div + div {
    margin-left: 10px;
}

Floating solution: http://jsfiddle.net/4w85y/ (will work in older browsers also).

* {
    box-sizing: border-box;
}

/* 
    This is used to prevent margin collapse 
    due to floating
*/

.container {
    display: table;
    width: 100%;
}

.container > div {
    float: left;
    width: 33.3%;
    outline: 1px solid red;
}

.container > div + div {
    padding-left: 10px;
}

Lastly, another newer approach using columns: http://jsfiddle.net/4G5E9/ (can be a bit buggy).

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count;

    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.container > div {
    display: inline-block;
    width: 100%;
    border: 1px solid red;
}