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

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 + "%");