Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Marie Veverka
Marie Veverka
12,117 Points

2 column gallery

Hi All! I am really stuck on this lesson. I am trying to create a two column layout like Nick's in the video with some of my own images and it keeps forcing some of the images onto the next line. Currently, I have 1 line with 2 images side by side like I want, and then the next line will have 1 image, and then a few lines with 2 images, and then another line with 1 image again. Any ideas where I might be going wrong? Thanks!

In my general section, I have the image width selector like in the video:

img {
  max-width: 100%;
}

And then for this gallery, I have:

#gallery_plexi {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery_plexi li {
  float: left;
  width: 45%;
  margin: 2.5%;
  text-align: center;
  color: #bdc3c7;
}

#gallery_plexi li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #777;
}

3 Answers

Marie Veverka
Marie Veverka
12,117 Points

Just in case anyone else runs into this problem, you can fix it by using the nth child pseudo class! So, in my gallery I needed to use:

gallery_plexi li:nth child(3n) {

clear: left; }

If clear left doesn't work, try clear right as well. For some problem images I needed to use left, and others I needed to use right. Yay!

Henry Goh
Henry Goh
20,201 Points

Hi Marie, I checked through your CSS and it works fine. It'd be better if you could upload your HTML file as well as I think the issue could come from the HTML file. Probably a missing close bracket etc. Those kind of small syntax errors.

Best regards.

Marie Veverka
Marie Veverka
12,117 Points

HI Henry, Thanks for the reply. I used the nth child pseudo class on the problem images and all seems to be working now. Thanks though!