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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Peter Hsiao
Peter Hsiao
2,086 Points
Posted by Peter Hsiao
Peter Hsiao
2,086 Points

Totally Confused About Build a Three Column Layout @5:12

Hi Everyone,

I'm watching the video Build a Three Column Layout and totally am confused starting @5:12 when Nick begins doing the math calculation on changing the Portfolio page to a 3-column layout.

I'm confused about the 2.5px margin on all sides of the "item" that he's referring to. Can someone point to me what video that was? What is Nick referring to exactly for the "items?" If it's the Gallery list items, mine are 1.5% for the margin...

Thanks so much guys!

1 Answer

Brandon Keene
Brandon Keene
7,217 Points
Brandon Keene
Brandon Keene
7,217 Points

Ok, so to start, the "items" are indeed the gallery images. At @5:35 he notes that "we know that each (gallery) item has a margin of 2.5 on all sides." You should find this styled in your main.css file; under the "page portfolio" segment (if you've been using his commenting scheme and entering the same values) you'll find:

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;        /* <---- this is the important bit. */

That's where we get our 2.5 margin, but the trick is that it's 2.5 for each side of the image, or a total of 5% per image. But 5% of what? The answer is essentially "5% of the total width of the browser window." So, since we have three images, each of which has a border that takes up 5% of that space, we have a total of 15% of the available space taken up just by the image margins. So, then 100% of the available space minus that 15% leaves 85% of the space remaining, and since we want the images to take up all that space, we divide it between the three of them. The result is that the images (or "items") each get to take up "28.3333%" of the available space.

Hope this helps to clarify things for you!