Question

I am trying to build a page to display two images side by side. I want these items centered on the screen in a book format and as the browser is resized, the images height is changed so they fill the window.

In order to do this I am using display inline-block with text-aligned center to achieve the affect. IT works great on FF but when I open in Safari or Chrome on resize the divs begin to overlap. I created this jsfiddle to show an example of my dom. I need the pageOne and pageTwo divs inline-block because later I absolutely position links on top of the page images.

What am I missing?

In order to see that issue, you’ll need to open the jsFiddle in safari/chrome and make the result pane larger than the default. Start with your Browser about 1/2 its normal width/height. As you run the jsFiddle, enlarge your browser and notice how the two images begin to overlap. If you open it in FF they wont overlap.

http://jsfiddle.net/X9NNh/1

I was able to get close to the effect I want in all the browsers with this using tables:

http://jsfiddle.net/x82uK/

Answer 1

Indeed, this is tricky because those inline-block containers don’t resize themselves to fit their contents as their contents scale.

Though it will make your job harder (read: require Javascript) when it comes to absolutely positioning links atop the images, here’s an alternative approach using background-size: contain.

HTML:

<div id="issue">
  <div id="leftPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
  <div id="rightPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
</div>

CSS:

html, body {
  height: 100%;
  background: #666;
}
#issue {
  position: absolute;
  top: 20px; bottom: 20px;
  left: 20px; right: 20px;
  border: 1px solid grey;
  box-sizing: border-box;
  background: #EEE;
}
.page {
  position: absolute;
  top: 30px; bottom: 30px;
  background-repeat: no-repeat;
  background-size: contain;
}
#leftPage {
  background-position: center right;
  left: 30px; right: 50%;
}
#rightPage {
  background-position: center left;
  left: 50%; right: 30px;
}