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

General Discussion

Posted by Marie Veverka
Marie Veverka
12,117 Points

Two Column Layout

Hi there! I am working on creating a two column layout for images of paintings and for some reason some of the images are skipping down onto the next line leaving only one image on a line. Any ideas where I might be going wrong? Here is my current css for this specific gallery:

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

#gallery_plexi li {
  float: left;
  width: 40%;
  margin: 5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

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

3 Answers

Eric Martz
Eric Martz
16,007 Points
Eric Martz
Eric Martz
16,007 Points

I am not 100% sure, but I wonder if some of your images are growing beyond the 40% for your li and causing the next image to be pushed to the next line. Do you have something to make sure images are no larger than their parent container?

img {
   max-width: 100%;
}
Marie Veverka
Marie Veverka
12,117 Points
Marie Veverka
Marie Veverka
12,117 Points

hmm, I have that earlier in my general css . . .

Eric Martz
Eric Martz
16,007 Points
Eric Martz
Eric Martz
16,007 Points

I figured you would say that...

From what I see in the code you have posted, it looks right to me. Have you tried using Chrome's developer tools to see what might be causing the element to jump to the next line?