Fluid column layout with fixed pixel margins betwe

Question

I dont want to use JS for this, only a css solution please.

I want the columns inside of a containing div to fit inside equally i.e each one is a third of the width of the container. I have achieved this here - http://jsfiddle.net/yFxZX/

However, on top of this, I also want 10px margin between the columns, with the first column kissing the left edge of the container, and the right column kissing the right edge of the container. see image below for crude mock up.

As the browser is re-sized or parent container changes width I want the columns to resize accordingly to fill the space but the margins between them to remain fixed at 10px.

Can this be done without JS?

Answer 1

In Html:

<div class="container">
    <div class="box">
        <div class="box-content">
            First
        </div>
    </div>
    <div class="box">
        <div class="box-content">
            SECOND
        </div>
    </div>
    <div class="box last">
        <div class="box-content">
            Last
        </div>
    </div>
</div>

in Css:

.container {
    background: green;
    overflow: auto;
}
.box {
    width: 33.3%;
    float: left; 
}
.box.last {
    width: 33.4%;
}
.box .box-content {
    margin-right: 10px;
    background: red;
}
.box.last .box-content {
    margin-right: 0px;
    background: red;
}

if you want your box has same height in css Add:

.box .box-content {
    margin-right: 10px;
    background: red;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

http://jsfiddle.net/wqwDN/

Answer 2

Use negative margins:

.container {
  background: green;
  overflow: auto;
}

.inner {
  padding-left: 20px;
}

.box {
  width: 33.3%;
  background: red;
  float: left;
  margin-right: 10px;
}

.first {
  margin-left: -20px;
}

.last {
  width: 33.4%;
  margin-right: 0;
  /*float:right;*/
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}

http://jsfiddle.net/yFxZX/2/