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


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

2 Answers

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!

Thanks! It worked :)

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">
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/

Thanks for the help!