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 trialMarlon Samuel
2,500 Pointsadding 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?
Dustin Matlock
33,856 PointsHey Marlon, usually by posting your code, we can get a better look at this for you.
Jason Anello
Courses Plus Student 94,610 PointsHi Marlon,
I put your img layout in a code block for you to preserve the whitespace.
2 Answers
Joshua Holland
2,865 PointsI 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
2,500 PointsThanks 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>
Marlon Samuel
2,500 PointsMarlon Samuel
2,500 Pointslol the format of my imgs didn't stay. i tired delineating with my text how the img's were displaying on my page.