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 Styling Web Pages and Navigation Style the Portfolio

Marlon Samuel
Marlon Samuel
2,500 Points
Posted by Marlon Samuel
Marlon Samuel
2,500 Points

adding a sixth image

Why when i add a sixth image it appears below and to the left of my fifth image? for example when previewing my page the layout looks:

img1    img2
img3    img4
        img5
img6

as you can see img5 does not appear to left i.e. below img3 and img6 respectively below img4

thoughts?

Marlon Samuel
Marlon Samuel
2,500 Points
Marlon Samuel
Marlon Samuel
2,500 Points

lol the format of my imgs didn't stay. i tired delineating with my text how the img's were displaying on my page.

Dustin Matlock
Dustin Matlock
33,856 Points

Hey Marlon, usually by posting your code, we can get a better look at this for you.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Marlon,

I put your img layout in a code block for you to preserve the whitespace.

2 Answers

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

I ran into a similar problem and I believe what I did was used the nth-child pseudo selector to select the image I was having trouble with (the 5th image in your case) and cleared the space left of it which aligns it to the left and the sixth image would follow. That would look something like 

img5: nth-child (3n) {
     clear: left;
}

The "img5" in the example would of course be replace by whatever selector is relevant for that image.

Though it would be easier to answer if you posted your own code :)

Marlon Samuel
Marlon Samuel
2,500 Points
Marlon Samuel
Marlon Samuel
2,500 Points

Thanks everyone for the responses - Josh - i'll give that a try - Jason thanks lol that's what I was trying to accomplish!! Dustin below is my code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Marlon | Samuel</title> <link rel="stylesheet" href="treehouse/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="treehouse/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <!-- Anchor element --> <h1> Marlon Samuel</h1> <h2>Aspiring Web Developer</h2> </a> <nav> <ul> <!-- Unorderd List element --> <li><a href="index.html" class="selected">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/img-1"> <img src="img/img-1"alt=""> <p>Home</p> </a> </li> <li> <a href="img/img-2"> <img src="img/img-2"alt=""> <p>Fargo</p> </a> </li> <li> <a href="img/img-3"> <img src="img/img-3"alt=""> <p>San Deigo</p> </a> </li> <li> <a href="img/img-4"> <img src="img/img-4" alt=""> <p>Miami</p> </a> </li> <li> <a href="img/img-5"> <img src="img/img-5" alt=""> <p>New York</p> </a> </li> <li> <a href="img/img-6"> <img src="img/img-6" alt=""> <p>Chicago.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/Capiten25"><img src=""img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a> <a href="http://facebook.com/marlon.samuel.16"><img src=""img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a> <p>Ā© 2014 Marlon Samuel.</p> </footer> </div> </body> </html>