Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kit Howlett
Kit Howlett
2,428 Points
Posted by Kit Howlett
Kit Howlett
2,428 Points

Is this method still correct? Using % instead of negative margin?

Hi all,

I know somebody touched on it previously but I still don't know if its okay. I created the two columns by just making the width 48% without using a negative margin. Is this still okay or is there a specific reason for using a negative margin instead?

Thanks in advance!

My css -

  .col {
    display: inline-block;
    width: 46%;
    background: lightgrey;
    padding-left: 2%;
    padding-right: 2%;
    vertical-align: top;

2 Answers

Brent Suggs
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points
Brent Suggs
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points

Your code is still valid but the two columns with not take up the entire width of their container without the negatie margin. You will notice that the columns don't line up with the edges of your container.

Trevor Storey
Trevor Storey
4,238 Points
Trevor Storey
Trevor Storey
4,238 Points

Brent Suggs answer is correct. If you change the background color of both .col and .container to different colors it's easy to see that the columns aren't positioned evenly inside the container unless you use the negative margin.

Gianluca Maio
Gianluca Maio
9,128 Points
Gianluca Maio
Gianluca Maio
9,128 Points

I used the same method as Kit Howlett (without negative margins):

.col {
    display: inline-block;
    width: 45%;
    vertical-align: top;
    padding: 0 2.5%;
    background: lightgrey;
  }

and I have the same result as observed in the video. It's only after adding the padding that the content of the columns doesn't line with the container. Same thing happens in the video... or am I missing anything?