Horizontal Images larger than Browser View Width

10 Oct 2018

Problem: You need to have images horizonally adjacent to each other, and you want the width of the page to be determined by the combined horizonal width of the images instead of the container.

Solution: Use display: table-cell; in the style (css) of the wrapping div for each image.

Example:

As you can see, the cell class divs ignore the width of the containing element, and determine the width of the page.

Code:

The above images are using the following code:

Play with this code at jsfiddle

<style>
div.container {
  width: 200px;
}
div.cell {
  display: table-cell;
}
</style>
<div class="container">
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
<div class="cell">
  <img src="https://i.postimg.cc/tgQfBk6R/example.png">
</div>
</div>

Comments !