Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Responsive Layout

Posted by Lynn Patricia
Lynn Patricia
7,908 Points

How do I create a gutter between columns and set it to the the correct width?

I can't remember which video that lesson was in.

Lynn Patricia
Lynn Patricia
7,908 Points

I found this answer on stackoverflow.com and it worked well:

"I give all my child divs a complete margin:

margin: 10px; And for the surrounding parent div i set a negative margin:

margin: -10px; I also had to remove any explicit width or height setting for the parent div, otherwise it did not work.

This way, in absolute terms, the child divs are correctly aligned, although the parent div obviously is set off, which in my case is OK, because it will not be visible."

http://stackoverflow.com/questions/7676951/how-to-put-spacing-between-floating-divs

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Might you be thinking of this video on grids?

Let me know if that's not what you're looking for, and we can go over it here.

Jordan Watson
Jordan Watson
14,738 Points
Jordan Watson
Jordan Watson
14,738 Points

I noticed you found a solution though you could use the :last-child selector? By this I mean you have your markup like so with you parent div and its children with it in 'columns': 

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

To then get an equal amount of padding/margin or gutter between them you set

.child{
   margin-right: 10px 
}

and the last one you take the margin from the right off

.child:last-child:{
  margin-right: 0;
}

This way it would look a bit like this... https://jsfiddle.net/xyk59vgf/1/

Hope this helps!