This forum is now read-only. Please use our new forums at discuss.codecademy.com.

HTML Basics Forum

View Course » View Exercise

294 points
3267f0a46b303778d9b7a7383483c6a5?s=140&d=retro
Submitted by
fferna07
over 1 year ago

How do I make an image go below the other rather than next to it?

If I have two images, how do I arrange the code so that the second will go below the first one rather than next to it. When I preview the page, the two images keep showing up next to each other.


0 votes

permalink

images are inline elements, which means they will arrange themselves besides each other unless you specify different. There are a few things you can do, the easiest (and dirtiest) way is to insert a break:

<img src="#">
<br>
<img src="#">

Or you could wrap your images inside a div:

<div>
  <img src="#">
</div>
<div>
  <img src="#">
</div>

or you could tell your image to behave like a block, rather then wrapping a block around it:

<style>
  img { display: block; }
</style>

All this will be explained in the course later on (except for the break, but the break is easy)

2410 points
5671826195e378c47d000782_659060817
Submitted by
stetim94
over 1 year ago


0 votes

permalink

Thanks Stetim94! :)

294 points
3267f0a46b303778d9b7a7383483c6a5?s=140&d=retro
Submitted by
fferna07
over 1 year ago

1 Comment

5671826195e378c47d000782_659060817 stetim94 over 1 year ago

you're welcome