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

Posted by Heather Davies
Heather Davies
3,114 Points

How do I get the pictures to be next to one another instead of below?

https://w.trhou.se/mu218gme3o http://port-80-owwbdci09z.treehouse-app.com

2 Answers

Anthony Mejia
Anthony Mejia
8,840 Points

Hi Heather,

Is this the look you're trying to achieve? There's a couple of things you need to do in order to get your pictures side by side.

  1. Increase the max-width of your body element. If you want a consistent, scalable website (I hope you do), try setting the width of your body with a percentage. This will allow for more flexibility and give your website a consistent look across any range of devices.

  2. If you followed step 1, then go ahead and add a width rule to with a percentage to your images. You can include a max-width as well so these images don't take a gazillion pixels on desktop. The percentage I used in my screenshot was 20%.

  3. For the images to be displayed next to each other, add display: inline; to your img rule. This will display your images in a single line with the others if there's room.

Hope this helps!

Heather Davies
Heather Davies
3,114 Points

Thanks! It worked :)

Samuel Key
Samuel Key
3,310 Points
Samuel Key
Samuel Key
3,310 Points

I had trouble getting these to line up for some reason so I used flexbox. Here's what I ended up doing:

    <div id="images">
      <img src="Heather1.jpg" alt="Heather">

      <!--fish image -->
      <img src="fish.png" alt="fish"> 

      <!--giraffe image -->
      <img src="Giraffe.jpg" alt="Giraffe">
    </div>

/***********************************************
Image styling 
***********************************************/
#images {
  display: inline-flex;
  flex-direction: row;
}

#images img {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

Here's some more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Heather Davies
Heather Davies
3,114 Points

Thanks for the help!