Fluid column layout with fixed pixel margins between them?

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

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/