Correct method for grid system gutters?
# January 22, 2013 at 10:00 am
I’m moving over to Responsive Design and testing Foundation 3 on a website. I haven’t used grid systems much and would like to know how best to achieve gutters.
My test site here [http://diskbacker.com](http://diskbacker.com “Diskbacker”) shows the issue I need to resolve.
I have the content div and sidebar div highlighted with background colors to show what is going on. They touch each other by default. In the final design I’d like to add background colors to these but with a gutter in between.
How do I add some separation between the content div and the sidebar div? Adding a padding-right value to #content only pads the text.
Thanks in advance.# January 22, 2013 at 10:35 am
Thanks. Adding a margin requires a resize of the div as it pushes the sidebar down, that’s why I thought of outside gutters.
I did read this but I’m not sure whether it would integrate into the Foundation design well:
I’ve tried your method too Paulie_D and this doesn’t seem to break anything, so may be the way forward.
Does it follow that this would be the best method to keep the maximum screen width as it drops down onto smaller devices? I’m thinking of smartphones which are already tight for space.
You must be logged in to reply to this topic.