CSS Stack images from right to left, out of the DIV

Question

I'm trying to achieve a past and future picture line in 2 divs. All pictures on left side of screen stack to infinity from right to left and all images on the right side of screen stack to infinity left to right. I have almost achieved this except I can't stop the images going to a new line.

Fiddle

HTML

<div id="parent1">
   <div id="past">
      <img id="topic1" src="./img/topic1.png"></img>
      <img id="topic2" src="./img/topic2.png"></img>
      ...

   </div>
   <div id="future">
      <img id="topic1a" src="./img/topic1a.png"></img>
      <img id="topic2b" src="./img/topic2b.png"></img>
      ...

   </div>
</div>

CSS

#parent {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%
}

#future {
  position: absolute;
  height: 100%;
  width:50%;
  left:50%;
  top:0%
}

#future img {
  float: left;
  height: auto;
  width: auto;
  margin: 1%;
  max-height: 100%;
  white-space: nowrap;
}

#past {
  position: absolute;
  height: 100%;
  width:50%;
  left:0%;
  top:0%
}

 #past img {
  float: right;
  height: auto;
  width: auto;
  margin: 1%;
  max-height: 100%;
  white-space: nowrap;
}

Any help would be great. Currently they're stacking vertically to infinity :(

Answer 1

Based on your description in the comments, you would like the following structure:

3 - 2 - [ 1 | 1 ] - 2 - 3

Where the elements numbered 1 are visible and 2 & 3 are off the screen but still inline.

You could achieve this by having the elements in the div on the right - #present - using text direction left to right (default in western browsers, but worth specifying if your layout depends on it) and the div on the left - #future - using the text direction right to left. You can then hide the overflowing elements using overflow: hidden within the parent element:

CSS

img {
    height: 100%;
    width: 100%;
}

#past, #future {
    position: absolute;
    height: 100%;
    width:50%;
    left:0%;
    top:0%;
    overflow: hidden;
    white-space: nowrap;
}

#past {
    left:50%;
    text-align: left;
    direction: ltr;
}

#future {
    text-align: right;
    direction: rtl;
}

HTML

<div id="past">
    <img id="topic1" src="/path/to/image1.jpg"></img>
    <img id="topic2" src="/path/to/image2.jpg"></img>
    <img id="topic3" src="/path/to/image3.jpg"></img>
</div>
<div id="future">
    <img id="topic1a" src="/path/to/image4.jpg"></img>
    <img id="topic2b" src="/path/to/image5.jpg"></img>
</div>

Working example: http://jsfiddle.net/vymvN/

Answer 2

Right. The current answer I've got is to float: right, and make the #past div dynamically change width based on how many images are in it. If there is a of a non JavaScript way I'd be chuffed to learn about it :D

CSS

#past {
   right: 50%;
   width: 300%;
}

#past img {
   float: right;
}

JQuery

$('#past').css('width', ( $('#past > img').size() ) * 100 + "%");