Bummer! You must be logged in to access this page.

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

Posted by Gina Scalpone
Gina Scalpone
21,330 Points

[SOLVED] Photo gallery problem

I have two photo galleries on a website, and I'm trying to use the same same code for both. The code I've written works for one just fine, but on the other, every 4th photo is on it's own line. Why is it working on one but not the other, and how do I fix it?

Relevant code:

<div id="wrapper">
            <ul id="polaroid-gallery">
                <li><a href="img/polaroid/cara-birthday-faces.jpg">
                        <img src="img/polaroid-preview/cara-birthday-faces-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/cara-birthday-grumpy.jpg"> 
                        <img src="img/polaroid-preview/cara-birthday-grumpy-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/cara-birthday-happy.jpg">
                    <img src="img/polaroid-preview/cara-birthday-happy-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/sian-birthday.jpg">
                        <img src="img/polaroid-preview/sian-birthday-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/sian-laughing.jpg">
                        <img src="img/polaroid-preview/sian-laughing-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/sian-zoe.jpg">
                    <img src="img/polaroid-preview/sian-zoe-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/allan-and-nick-crepe-armchair.jpg">
                    <img src="img/polaroid-preview/allan-and-nick-crepe-armchair-preview.jpg" alt=""></a></li>
                <li><a href="img/polaroid/cara-fire.jpg">
                    <img src="img/polaroid-preview/cara-fire-preview.jpg" alt=""></a></li>
            </ul>
        </div>

#gallery, #polaroid-gallery {
    text-align: center;
    padding: 0;
}
#gallery li, #polaroid-gallery li { 
    margin: 0 auto;
    float: left;
    padding-bottom: 10px;
}
#gallery li, #polaroid-gallery li {
    width: 28%;
    margin: 2.66%;
}
#gallery img, #polaroid-gallery img {
    width: 100%;
    border: 1px solid #000;
}
Clayton Tevebaugh
.a{fill-rule:evenodd;}techdegree
Clayton Tevebaugh
Front End Web Development Techdegree Student 9,562 Points

I think its because you're using an ID instead of a class. You can only have one instance of an ID on a page? I could be wrong though I was trying to read your code on my iPhone.

2 Answers

Gina Scalpone
Gina Scalpone
21,330 Points

I figured it out! The images were slightly different sizes, which messed up the layout.

Clayton Tevebaugh
.a{fill-rule:evenodd;}techdegree
Clayton Tevebaugh
Front End Web Development Techdegree Student 9,562 Points

Glad you figured it out. Reviewing the code can't find stuff like this so its good to have your experience to fall back on if I ever have a similar situation.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

It's really hard to say without seeing some sort of screenshot of the page to see what's going on. My guess is that something fishy is going on with your floats. Is there text or something underneath the pictures?

Gina Scalpone
Gina Scalpone
21,330 Points

http://imgur.com/Sg7vFaa Here's a screenshot of what's going on. No text. The weird thing is that it only happens in the three-column layout. I also have a two-column and one-column layout for smaller screens, and those are fine.