Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


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!