Align elements side-by-side with dynamic size - html

Question

Here's the thing: I'm making a pure JavaScript full screen image slider, and I'm having a little trouble with my elements position.
The image's size needs to be dynamic, because it has to fit in every screen. I need all the elements aligned side-by-side, so I can animate the slider with a left/right effect.
Here's my issue: I can't get those elements aligned. They just stand vertically one below the other.
I really need those images with a 100% size, but that way I can't align them side-by-side. If i set a minor percentage (smaller then the parent size), or if I set a static value, they stand how I want.
What I need to do here?
You can find a live exemple here http://jsfiddle.net/9uF2b/
Here's some of my code:
<div class="wrap">
<div class="slider">
<div class="container" id="container">
<ul>
<li class="active">
<a href="/teste/">
<img src="img/1.jpg" alt="teste alt">
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.wrap {
width: 100%;
height: 100%;
}
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
}
#container {
width: 100%;
height: 100%;
// overflow: hidden;
}
img, a {
width: 100%;
height: 100%;
}
li {
display: inline;
}
ul {
margin: 0px;
padding: 0px;
}
Thanks in advance for any help you are able to provide!

Answer 1

Try to add white-space: nowrap; to your slider:
.slider {
width: 560px;
height: 560px;
margin: 0 auto;
white-space: nowrap;
}
Demo: http://jsfiddle.net/9uF2b/1/

Answer 2

This is because you are giving 100% height and width to img in in:
img, a {
width: 100%;
height: 100%;
}
You have to give height and width 50% to img tag only as:
img{ width: 50%; height: 50%;}
So now images will add up to 100% width of parent cotainer. If you use more than 2 images then do the math accordingly.
Hope that solves your problem.