Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Grid Gutter for Sidebar

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 2, 2013 at 2:20 pm #42425
    jordangro
    Member

    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!!

    February 2, 2013 at 3:21 pm #123177
    Aiya
    Participant

    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%;
    
}
    February 2, 2013 at 4:06 pm #123154
    jurotek
    Participant

    @jordangro, [Here is…](http://cdpn.io/AGvly “”) another way to do that

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.