Put images next to each other using CSS

Question

I am currently working on an assignment and ran into a bit of a problem. I am trying to put images next to each other using CSS. But it does not seem to work. I am using semantic HTML, which means for the two images I am using the <figure> tag. I will show example of the code I have:

.blitz {
  height: 200px;
  width: 300px;
  float: left;
}

figcaption {
  font-family: Helvetica;
  font-size: 22px;
  color: gray;
}

.rum {
  height: 200px;
  width: 300px;
}

<figure>
  <img class="blitz" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Berry Blitz">
  <figcaption>Fall Berry Blitz Tea</figcaption>
</figure>
<figure>
  <img class="rum" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum">
  <figcaption>Spiced Rum Teat</figcaption>
</figure>

score 1 · Accepted Answer · answered Jan 07 '22 at 14:12

Wrap your figure elements inside of a div and set that to display as flex. See below:

div {
  display:flex;
}
img {
  max-width:200px;
}

<div>
  <figure>
    <img class= "blitz" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Berry Blitz">
    <figcaption>Fall Berry Blitz Tea</figcaption>
  </figure>
  <figure>
    <img class="rum" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum">
    <figcaption>Spiced Rum Teat</figcaption>
  </figure>
</div>

Put images next to each other using CSS

1 Answers1