Forums

jordangro

Hi all,

I have simplified my code on CodePen: http://codepen.io/jordangrogan/pen/wCAng

My question is: How can I get a 20px gutter in between the main content and sidebar? The main content is red, and the sidebar is blue. How do I get the gutter transparent to the body background? I want percentage widths so that it works responsively on mobile versions, etc.

Does this make sense?

Thanks!!

ChrisP

Add an inner wrap to the content and apply padding instead of margin

Aiya

Because your main content and sidebar takes 100% of the space (75% + 25%), there is no space for gutter anymore. This will work:

 
section.left {
  background:red;
  height:400px;
  float:left;
  width:75%;
  margin: 0 1% 0 0; 
}

section.right {
  background:blue;
  height:400px;
  float:right; 
  width:24%;
}

jurotek

@jordangro, Here is... another way to do that

treehouse : what would you like to learn today?

Forums

[Solved] Grid Gutter for Sidebar