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

HTML Build a Simple Website Text Editors and HTML Finishing the HTML

Posted by Jess Biggs
Jess Biggs
Courses Plus Student 582 Points

Why are images side by side, instead of shown in tandem?

I have a question about the the images for the Fresh Out of the Oven section.

Refer to 1:52 in the video. Here is the code:

  <div id="new-cupcakes">
    <h2>Fresh Out the Oven</h2>
    <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>.</p>
    <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
    <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
  </div>

My question is, why are these two images displaying side by side, instead of one on top of the other? There is no formatting being used here that would put these images side by side in the browser. Do all images in a <div> get placed side by side automatically?

2 Answers

Miguel Agawin
Miguel Agawin
3,211 Points
Miguel Agawin
Miguel Agawin
3,211 Points

The image element, like anchor, is inline so it doesn't stack by default as opposed to block elements like heading 2 and paragraph.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

If there is space laterally for two images to sit next to each other, they will. Block elements take up the entire lateral space available to them where inline elements only take up the space they need.