Two images side by side and responsive

use display table to set it side by side and keep it side by side and responsive.

display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;

this will not only keep them the same width but also keep the containers the same height.

vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.

Any questions just fire away.

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}
#outer {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.itemwrapper {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="item2.jpg" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="item3.jpg" alt="pen" />
    </div>
  </div>
</div>

Tags:

Html

Css

Recent Posts