homepage Welcome to WebmasterWorld Guest from 54.166.148.189
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Fluid grid with fixed margin
greencode




msg:4570036
 1:55 pm on May 2, 2013 (gmt 0)

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




msg:4570134
 8:28 pm on May 2, 2013 (gmt 0)

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




msg:4571050
 9:47 am on May 6, 2013 (gmt 0)

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




msg:4571134
 3:01 pm on May 6, 2013 (gmt 0)

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

Possible, not practical.

Marshall

lucy24




msg:4571295
 9:38 pm on May 6, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved