Grow your CSS skills. Land your dream job.

Grid Gutter for Sidebar

  • # February 2, 2013 at 2:20 pm

    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 2:46 pm

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

    # February 2, 2013 at 3:21 pm

    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

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".