CSS Positions and dynamic height for container - html

Question

you want the container to shrink or expand when you click next?I have created one fiddle here: http://jsfiddle.net/agriz/nS8M3/1/
I am forced to give height for these two elements <div class="slider"> <ul>
I would like to have automatic height for these two containers.
If we mix relative and absolute positions, is it possible to have dynamic height for the containers?
I searched in SO and found this one: http://jsfiddle.net/ambiguous/zVBDc/
Here too the container has the height property in css.
HTML PART
<div class="slider">
<ul>
<li class="active"><img src="http://i41.tinypic.com/10rok86.jpg" class="slider_img" /> </li>
<li><img src="http://i40.tinypic.com/f0rfag.jpg" class="slider_img" /></li>
</ul>
</div>
<div class="toolbars">
<button onClick="window.slider.previous()">Previous</button>
<button onClick="window.slider.next()">Next</button>
</div>
I want the container to shrink or expand when I click next (copied from a comment!)

Answer 1

See fiddle for possible answer. http://jsfiddle.net/zGpKa
I made the following change to your CSS.
.slider li {
position: relative;
margin: 0;
padding: 0;
left: 0;
display: none;
}