Get a free trial // 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:

    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?


    # 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 {
    margin: 0 1% 0 0;

    section.right {

    # February 2, 2013 at 4:06 pm

    @jordangro, [Here is…]( “”) another way to do that

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed