Place two images side by side

Question

I am trying to place two images side by side. I want them to be full width and responsive. However, I can't figure out how to get them on the same line. Does anyone have solutions? Here is a fiddle - https://jsfiddle.net/0je558ex/

<div class="food-featured-posts">

  <div class="food-featured-posts-first">
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
  </div>


  <div class="food-featured-posts-second">
  <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
  </div>

</div>

food-featured-posts {
  width: 100%;
  margin-bottom: 100px;
}
.food-featured-posts-first img {
  width: 50%;
  height: 50%;
  display:inline-block
}
.food-featured-posts-second img {
  width: 50%;
  height: 50%;
  display:inline-block
}

Does this [post](http://stackoverflow.com/questions/24680030/align-images-side-by-side-in-html) help with what you are trying to do? — Pike D., Jan 12 '17 at 00:27

Michael Coker · Answer 1 · 2017-01-12T00:48:56.303

Set the divs that wrap the image to width: 50%; display: inline-block; and set the img tags to width: 100%; so they will take up the entire div, then remove the space between the inline-block div elements in your HTML since spaces on inline elements take up space and the space will exceed 100% width (since each div takes up 50%).

img {
  width: 100%;
}
.food-featured-posts > div {
  width: 50%;
  display: inline-block;
}

<div class="food-featured-posts">
  <div class="food-featured-posts-first">
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
  </div><div class="food-featured-posts-second">
  <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
  </div>
</div>

score 1 · Answer 2 · edited May 23 '17 at 12:33

You have two problems actually.

First, you're setting the styling of the img, but the div which wraps them are implicitly styled to basically be: display:block;width:100%;.

Simply remove the divs.

Second, and slightly more interestingly, your img elements still will not render next to each other at 50% because any whitespace between two display:inline-block elements means that the total size is greater than 100%, so the second element is kicked to the second line.

You therefore need to put the img tags on the same line—frustrating, I know.

See this question: CSS two div width 50% in one line with line break in file

<div class="food-featured-posts">
  <!-- Note these are on the same line -->
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ ><img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
</div>

food-featured-posts {
  width: 100%;
  margin-bottom: 100px;
}
.food-featured-posts img {
  width: 50%;
  display:inline-block;
}

Place two images side by side

2 Answers2