Question

I’m building my first responsive website based on the 960 grid and I’ve run into something that I can’t quite work out.

Getting right to the point I have 2 columns in my grid:

.left: 720px total width
.right: 240px total width

Both of these include 10px of padding on both the left and right so in my fixed layout I would be applying the following which fit perfectly:

.left {
    width: 700px;
    padding: 0 10px;
    float: left;
}
.right {
    width: 220px;
    padding: 0 10px;
    float: right;
}

All well and good, but now I’m using the target / context = result formula to calculate this grid so it’s responsive. I have a containing div which is 90% and here are my calculations:

.left {
    width: 72.916667%;
    padding: 0 1.388889%;
    float: left;
}
.right {
    width: 22.916667%;
    padding: 4.166667%;
    float: right;
}

I believe those calculations to be correct, but my right hand column is always dropping down to the next line because it doesn’t fit.

Any help where I’m going wrong would be great!

Answer 1

Your padding calculations are incorrect: 10px / 960px = 1.0416667%

Basically, you need to divide by the total span, e.g. the width that (originally) corresponds to 100%. In your case, that’s 960px.