Fluid grid with fixed margin

[greencode]

I'm using the following grid on a responsive site

.container_12 {
width: 900px;
margin-left: auto;
margin-right: auto;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline;
float: left;
margin-left: 15px;
margin-right: 15px;
}

.container_12 .grid_1 {width: 45px;}
.container_12 .grid_2 {width: 120px;}
.container_12 .grid_3 {width: 195px;}
.container_12 .grid_4 {width: 270px;}
.container_12 .grid_5 {width: 345px;}
.container_12 .grid_6 {width: 420px;}
.container_12 .grid_7 {width: 495px;}
.container_12 .grid_8 {width: 570px;}
.container_12 .grid_9 {width: 645px;}
.container_12 .grid_10 {width: 720px;}
.container_12 .grid_11 {width: 795px;}
.container_12 .grid_12 {width: 870px;}

But what I'm wanting to do it to have this as a percentage based grid with fixed margins. So I have this

.container_12 .grid_1 {width: 5%;}
.container_12 .grid_2 {width: 13.333333%;}
.container_12 .grid_3 {width: 21.666667%;}
.container_12 .grid_4 {width: 30%;}
.container_12 .grid_5 {width: 38.333333%;}
.container_12 .grid_6 {width: 46.666667%;}
.container_12 .grid_7 {width: 55%;}
.container_12 .grid_8 {width: 63.333333%;}
.container_12 .grid_9 {width: 71.666667%;}
.container_12 .grid_10 {width: 80%;}
.container_12 .grid_11 {width: 88.333333%;}
.container_12 .grid_12 {width: 96.666667%;}

But with having the 15px margin-left and margin-right it's not behaving itself. I'm having to use percentage based margins as well, which is not what I want.

Any ideas?

[lucy24]

Random questions, setting aside the obvious "how do you get 'responsive' and 'width: some-exact-pixel-count' into the same sentence?":

Are you sure you don't want {display: table-cell} instead? With all those percentages, it may behave better.

Do "grid_1" "grid_2" etc ever occur outside of .container and do they then have different values? If not, the CSS is over-constrained. It won't affect display, but the user's computer has to do extra work.

Why do you have "float" and "inline" in the same declaration? Just for backward compatibility with browsers that don't recognize "display: inline" on elements that default to block-level?

Come to think of it, what type of elements will all those grid thingies be attached to? (This one is a no-win. CSS runs marginally faster* if you don't constrain classes to div or span or whatever the element really is-- but it becomes harder for the human reader to interpret.)

But with having the 15px margin-left and margin-right it's not behaving itself. I'm having to use percentage based margins as well, which is not what I want.

This may be just as well. If you use different units in the same horizontal declaration-- like ems and percentages, or percentages and pixels-- the validator will yap about "not a robust stylesheet". Sometimes validator complaints can be ignored, but this one merits further attention.



* This seems counter-intuitive to me. But I read it in an article about responsive and mobile-friendly design and have to assume it's correct.

[greencode]

Thanks for the response. I created the grid from the gridsystemgenerator website.

So basically having a percentage based grid with fixed width margins is not possible?

[Marshall]

So basically having a percentage based grid with fixed width margins is not possible?

Possible, not practical.

Marshall

[lucy24]

So basically having a percentage based grid with fixed width margins is not possible?

Try laying it out as a one-row table. If you can get it to behave the way you want in all browsers, next step is to change each <td> to a div set to {display: table-cell}.

And then code a backup css for MSIE <8. And a second backup for mobiles, because there's bound to be a minimum practical width for this kind of thing.