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

Michael Sims
Michael Sims
8,101 Points
Posted by Michael Sims
Michael Sims
8,101 Points

Floating image in photo grid

Hello there,

I'm a new member on the PHP trail. I've gone through most of the trail, but found that I didn't retain a lot, so I started back over with a new strategy -- take a heck of a lot of notes and practice after each module... So I went back to the first module to just make sure I got everything from the basic CSS and HTML.... then I went back and started trying to build my own grid....

Problem: I have 8 photos I am trying to display. I have them floated to the left in the css, which works perfectly fine for the first four pictures, but, on the third row, where the 5th and 6th picture should be, the fifth picture pushes over to the right; the 3rd row has only one photo, pushing the 6th and 7th to the fourth row and leaving the eighth in the bottom row.. basically where the 5th picture should be, leaves a gap...

I thought I remember seeing something in the video about this, but after hours of searching, I just can't seem to find it. Can anyone help me out?

I'm not sure how why my coding below is displayed so weird, maybe someone can also tell me how how to properly paste....

Thanks so much in advance!

'''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mike Sims | Business Plan Writer</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1> Mike Sims </h1> <h2> Business Plan Writer </h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul>

    </nav>
</header>
<div id="wrapper">
    <section>
        <ul id="gallery">
            <li>
                <a href="img/1.jpg">
                    <img src="img/1.jpg" alt="first picture">
                    <p>This is picture one</p>
                </a>
            </li>
            <li>
                <a href="img/2.jpg">
                    <img src="img/2.jpg" alt="second picture">
                    <p>This is picture two</p>
                </a>
            </li>
            <li>
                <a href="img/3.jpg">
                    <img src="img/3.jpg" alt="third picture">
                    <p>This is picture three</p>
                </a>
            </li>
            <li>
                <a href="img/4.jpg">
                    <img src="img/4.jpg" alt="fourth picture">
                    <p>This is picture four</p>
                </a>
            </li>
            <li>
                <a href="img/9.jpg">
                    <img src="img/9.jpg" alt="fifth picture">
                    <p>This is picture five</p>
                </a>
            </li>
            <li>
                <a href="img/6.jpg">
                    <img src="img/6.jpg" alt="sixth picture">
                    <p>This is picture six</p>
                </a>
            </li>
            <li>
                <a href="img/7.jpg">
                    <img src="img/7.jpg" alt="seventh picture">
                    <p>This is picture seven</p>
                </a>
            </li>
            <li>
                <a href="img/8.jpg">
                    <img src="img/8.jpg" alt="eighth picture">
                    <p>This is picture eight</p>
                </a>
            </li>
        </ul>
    </section>
</div>
<footer>
    <a href="http://twitter.com/minorsociety"><img src="img/twitter-icon-2.png" alt="twitter logo"></a>
    <a href="http://facebook.com/minorsociety"><img src="img/facebook-icon.png" alt="facebook logo"></a>
    <p> &copy; 2015 Mike Sims. </p>
</footer>

</body>

</html> '''

'''css

img { max-width:100%; }

gallery {

margin: 5%;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: orange;
color: white;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: .75em;
color: white;

}

footer { font-size: .75em; text-align: center; clear:both; padding-top: 50px; color: white;

}

footer img { max-width: 50px; max-height: 50px;

} '''

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Here i fixed the code! :) (look at the Markdown Cheatsheet at the bottom when you post)

<!DOCTYPE html>

<meta charset="utf-8">
<title>Mike Sims | Business Plan Writer</title>
<link rel="stylesheet" href="css/main.css">


<header>
    <a href="index.html">
        <h1> Mike Sims </h1>
        <h2> Business Plan Writer </h2>
    </a>
    <nav>
        <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

    </nav>
</header>
<div id="wrapper">
    <section>
        <ul id="gallery">
            <li>
                <a href="img/1.jpg">
                    <img src="img/1.jpg" alt="first picture">
                    <p>This is picture one</p>
                </a>
            </li>
            <li>
                <a href="img/2.jpg">
                    <img src="img/2.jpg" alt="second picture">
                    <p>This is picture two</p>
                </a>
            </li>
            <li>
                <a href="img/3.jpg">
                    <img src="img/3.jpg" alt="third picture">
                    <p>This is picture three</p>
                </a>
            </li>
            <li>
                <a href="img/4.jpg">
                    <img src="img/4.jpg" alt="fourth picture">
                    <p>This is picture four</p>
                </a>
            </li>
            <li>
                <a href="img/9.jpg">
                    <img src="img/9.jpg" alt="fifth picture">
                    <p>This is picture five</p>
                </a>
            </li>
            <li>
                <a href="img/6.jpg">
                    <img src="img/6.jpg" alt="sixth picture">
                    <p>This is picture six</p>
                </a>
            </li>
            <li>
                <a href="img/7.jpg">
                    <img src="img/7.jpg" alt="seventh picture">
                    <p>This is picture seven</p>
                </a>
            </li>
            <li>
                <a href="img/8.jpg">
                    <img src="img/8.jpg" alt="eighth picture">
                    <p>This is picture eight</p>
                </a>
            </li>
        </ul>
    </section>
</div>
<footer>
    <a href="http://twitter.com/minorsociety"><img src="img/twitter-icon-2.png" alt="twitter logo"></a>
    <a href="http://facebook.com/minorsociety"><img src="img/facebook-icon.png" alt="facebook logo"></a>
    <p> &copy; 2015 Mike Sims. </p>
</footer>

css

img { max-width:100%; }

gallery {

margin: 5%;
padding: 0;
list-style: none;
}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: orange;
color: white;
}

gallery li a p {

margin: 0;
padding: 5%;
font-size: .75em;
color: white;
}

footer { font-size: .75em; text-align: center; clear:both; padding-top: 50px; color: white;

}

footer img { max-width: 50px; max-height: 50px;

}

6 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

You're looking for the "clear" property and the nth-child pseudo selector.

.gallery li:nth-child(4n) clear:left;

Sorry for formatting, sent on phone.

Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

Thanks so much guys. Jeff, I tried posting that code to the .css file, but it still didn't do the trick, I'm probably formatting that particular code incorrectly maybe? 

img {
    max-width:100%;
}

#gallery {
    margin: 5%;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: orange;
    color: white;
}



#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: .75em;
    color: white;


}

gallery li nth-child(4n) {
  clear:left;
}

footer {
    font-size: .75em;
    text-align: center;
    clear:both;
    padding-top: 50px;
    color: white;

}

footer img {
    max-width: 50px;
    max-height: 50px;

}
Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

I missed the # to identify the class above, but even with it, no luck.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Hello you missed the "-" sign, try this in the code

gallery li:nth-child(4n) {
  clear:left;
}

EDIT: nevermind you should use ":" after "li"

Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

Hey erdrag, I added the "-" to make it 

#gallery li-nth-child(4n) {
  clear:left;
}

but the gap is still there.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah, i edited my text, you have to use ":" sign after the "li"

like this 

gallery li:nth-child(4n) {
  clear:left;
}
Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

That worked! But then, it shifted the 7th picture and made it do the same thing. I added a clear to that one too, and it all lined up.... However, one more issue is present. The 7th picture is sized a bit bigger than the others, the box a bit longer than that of the rest of the pictures.... any advice?

#gallery li:nth-child(5n) {
  clear:left;
}

#gallery li:nth-child(7n) {
  clear:left;
}

Thanks so much!

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Try to set a width and height to all the list images

like this

#gallery li img {
 width: /*Choose  width*/;
height: /*Choose  height*/;
}
Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

Hey erdrag, got it working thanks so much!!! It was the height that was longer than the rest, and I noticed that the picture I had was a lot larger than the others, so it stretched the box. I replaced the image and it all works fine now. Is there a way to resize an image using code, or do I have to do it in Photoshop and then bring it back in??

Thanks so much erdrag, that really helped a lot!!! I'll paste in my final CSS coding here. 

img {
    max-width:100%;
}

#gallery {
    margin: 5%;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: orange;
    color: white;
}



#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: .75em;
    color: white;
}


#gallery li:nth-child(5n) {
  clear:left;
}

#gallery li:nth-child(7n) {
  clear:left;
}


footer {
    font-size: .75em;
    text-align: center;
    clear:both;
    padding-top: 50px;
    color: white;

}

footer img {
    max-width: 50px;
    max-height: 50px;

}
erdragerdragsson
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

You can adjust image size in css using the "Height and Width" property,

Or you can change the width or height using a program like photoshop, When you resize images in css, it can look stretched out, if you resize it to much. But otherwise it works great!

Michael Sims
Michael Sims
8,101 Points
Michael Sims
Michael Sims
8,101 Points

You are awesome erdrag, thank you!

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Glad i could help :)