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

John Levy
John Levy
1,451 Points
Posted by John Levy
John Levy
1,451 Points

How to place 3 images in a line in CSS

I have one large image and want to place 3 thumbnail images under the large image that will enlarge when hovered over. Right now when I do it I cannot get the three images the same height. I have attahvced my code. Thanks in advance HTML

<figure id="beginner">
  <img src="beginnermensimage.jpg">      /*Large image*/

<div class="thumbnail1">
  <a target="_blank" href="image1.jpg">
    <img src="image1.jpg" alt="Fjords" 
  </a>

</div>

<div class="thumbnail2">
  <a target="_blank" href="forest.jpg">
    <img src="image2.jpg" alt="Forest" 
  </a>
</div>

<div class="thumbnail3">
  <a target="_blank" href="lights.jpg">
    <img src="image3.jpg" alt="Northern Lights" 
  </a> 
</div>

CSS

img  {                                                                                      
    max-width: 500%;          /*Lagre image*/
.thumbnail1{
    width:15%;

    margin: -220px 10px 0px 10px;
}

.thumbnail2{
    width:15%;
    margin: -220px 0px 10px 220px;
}

.thumbnail3{
    width:15%;
    margin: -220px 20px 10px 450px;
}
    margin: 10px 10px 0px 0px;

 }
Max Bulygin
Max Bulygin
5,601 Points
Max Bulygin
Max Bulygin
5,601 Points

You have few major problems with your HTML and CSS. First is closing your tags. Your <figure> tag is not closed with </figure> closing tag. second none of your <img> tags are closed! The basic syntax is <img src="" alt=""> or <img src="" alt="" />. Pay attention that even <img> is not a pair tag like <figure></figure> it still should be closed with ">" or "/>" symbols. Third you nesting your css style. It not valid unless you write scss file which will be compiled to css. You can't nest styles like tags in HTML. I think you should became confident with this concepts first before moving on further with your project

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your feedback. Can you please write an example for HTML and CSS on how I can place the 3 thumbnail images under the larger image? Thanks

3 Answers

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points

Try this and also consider how you're scaling your image

.thumbnail1, .thumbnail2, .thumbnail3 { display: inline-block; }

img
{
max-width: 100%;
width:100%; display: block; }

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

When I tried the method Christian mentioned it also make the first image small. The first image should remain large and then the three thumbnail images should be replaced under it. Kind of like this page-http://www.tvisionfitness.com/product/beginner-men/

Thanks

Christian Lawrence
Christian Lawrence
3,941 Points
Christian Lawrence
Christian Lawrence
3,941 Points 
<figure id="beginner">
  <img src="beginnermensimage.jpg" alt="big image">      
</figure>

<div class="thumbnail1">
  <a target="_blank" href="image1.jpg">
    <img src="image1.jpg" alt="Fjords" 
  </a>
</div>

<div class="thumbnail2">
  <a target="_blank" href="forest.jpg">
    <img src="image2.jpg" alt="Forest" 
  </a>
</div>

<div class="thumbnail3">
  <a target="_blank" href="lights.jpg">
    <img src="image3.jpg" alt="Northern Lights" 
  </a> 
</div>

.thumbnail1, .thumbnail2, .thumbnail3
{ 
  display: inline-block; 
  width: 33%;
}

.thumbnail1 img, .thumbnail2 img, .thumbnail3 img
{ 
  display: block;
  width: 100%;
}

#beginner
{
  display: block;
  width:100%;
}
#beginner img
{
  display: block;
  widht: 100%;
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your help. I think I figured it out now