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

Alita Edmonds
Alita Edmonds
6,068 Points
Posted by Alita Edmonds
Alita Edmonds
6,068 Points

Weird image

I am making a website and when I preview the page in the browser, when it gets to a certain point, the fourth image is sinking down. Any idea how to fix this? Thanks!

Here is where my images are in HTML <main>

   <a href="img/computer.jpg">
     <img src="img/computer.jpg" alt="">
   </a>

   <a href="img/computer.jpg">
     <img src="img/computer.jpg" alt="">
   </a>

    <a href="img/computer.jpg">
     <img src="img/computer.jpg" alt="">
   </a>

    <a href="img/computer.jpg">
     <img src="img/computer.jpg" alt="">
   </a>

    <a href="img/computer.jpg">
     <img src="img/computer.jpg" alt="">
   </a>

 </main>

CSS properties

img { max-width: 300px; float: left; width: 40%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

When you say "sinking down", do you mean wrapping to the next line? That would be expected on screens wide enough for the images to reach the specified maximum of 300px. On smaller screens the wrapping would begin on the third image.

What is it you want to happen? If you want to always have all 5 images on one line you could set the width property to 15% instead of 40%.

Also, to share the entire project including images, make a snapshot of your workspace and post the link to it here.

Alita Edmonds
Alita Edmonds
6,068 Points
Alita Edmonds
Alita Edmonds
6,068 Points

I am using a different text editor so I can't do a snapshot and the photo i took of the page is not showing up.

I don't want the fourth image to sink slightly below the line of the other photos. thanks.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

When you say "slightly", that sounds like something other than wrapping.

I'd guess it has something to do with other elements and/or other CSS that you haven't shown here. Is there possibly something floated above it that hasn't been cleared?

If you don't find a solution you might consider uploading the project into a workspace so you can share the entire thing.