Put images next to each other using CSS

January 7, 2022

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>

>Solution :

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>