Question

LIVE EXAMPLE

So I’m using Chris Coyier’s CSS3 box-sizing grid setup. And I’ve got my grids set up perfect. Inside of each module I have a div which will set the background to be a CSS3 RGBA linear-gradient. All is well and shows up fine, but the since I’m using padding, the background of the last element is taking up the width of the module plus the padding. If you check out the example that might explain it further, the last module is the troubled one. I’ve tried to reset last element to padding-right: 30px which forms the correct width but then it’s not spaced out 100% over the width of the container.

Answer 1

note this answer has multiple edits to reflect the evolution of the problem and needs

You’re telling the browser each element is 25% of the available width, then you are telling it to deduct 30px from the right of each element to space them out with. Then you are telling it “except for the last one, don’t deduct anything from the right” so the first 3 are really 25%-30px, and the last one is the only one that is truly 25%.

How to resolve this is going to depend on what you want in your final layout, but I would get rid of the bit that says the last item has right-padding of 0px, and set all the elements to have left-padding of 15px and right-padding of 15px.

EDIT1

After clarifying needs, this answer suits OP better: http://jsfiddle.net/Az3eH/

HTML:

<div class="grid">
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
  <div class="col-1-4">
    <div class="tan-trans">
      1/4
    </div>
  </div>
</div>​

CSS:

.tan-trans {
    background: #282816;
    background: -moz-linear-gradient(top, rgba(40,40,38,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,40,38,1)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(40,40,38,1) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282826', endColorstr='#00000000',GradientType=0);
    border-radius: 10px;
    padding: 20px;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[class*='col-']{float:left;padding-left:1%;padding-right:1%; padding-top: 30px; }

.col-1-1 { width: 100%; }
.col-1-3 { width: 33.33%; }
.col-2-3 { width: 66.66%; }
.col-1-2 { width: 50%; }
.col-1-4 { width: 25.5%; }
.col-1-8 { width: 12.5%; }
.col-3-8 { width: 37.5%; }
.col-5-8 { width: 62.5%; }
.col-7-8 { width: 87.5%; }
.col-1-16 { width: 6.25%; }
.col-3-16 { width: 18.75%; }
.col-5-16 { width: 31.25%; }
.col-7-16 { width: 43.75%; }
.col-9-16 { width: 56.25%; }
.col-11-16 { width: 68.75%; }
.col-13-16 { width: 81.25%; }
.col-15-16 { width: 93.75%; }
[class*='col-']:first-of-type {padding-left:0; padding-right: 1%; width: 24.5%}
[class*='col-']:last-of-type { padding-left: 1%; padding-right:0;width: 24.5%}​

Edit 2
Upon further inquiry with OP, it appears that specifically what he needs (mixed percentage and fixed widths that would add up to 100% of the available width with variable numbers of columns and sizes) isn’t really possible with a pure HTML/CSS solution. With this in mind, it is my opinion that he go with a fixed layout as per 960.gs which would allow better options in figuring out what width each percent should be. i.e: 100% == 960px and all subdivisions be a fixed width fraction of that.