Skip to main content

Forums

This topic contains 3 replies, has 0 voices, and was last updated by  jordangro 6 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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!!

    #123177

    Aiya
    Member

    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%;
    }

    #123154

    jurotek
    Participant

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

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star