Getting absolutely positioned elements to flow with the rest of a layout - html

Question

I have a slideshow which works by absolutely positioning images one on top of the other and then changing the z-index of whatever slide I want to appear. The problem is I'd like to move it to the center and have the "prev" link and the "next" link on either side of the slideshow.
I've been trying to create a container with relative positioning around the absolutely positioned items and can get the slideshow to move around, but the next link doesn't show up on the other side of the slideshow (and I hope not to use hacks with margins to mess up the flow of the page).
My goal is to be able to treat the slideshow box just like any other box that flows with the rest of the page. Is there a way to do that?
my html
<a id="prevLink" href="#">Prev</a>
<div class="container">
<ul id="slideshow">
<li class="current">First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<a id="nextLink" href="#">Next</a>
my css:
.container {
position: relative;
}
#slideshow {
position: relative;
list-style-type: none;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
Link to the slideshow: http://codepen.io/KenjiCrosland/pen/QyqVaz

Answer 1

A couple changes you need:
Set the #container to display:inline-block and give it a width so that it stays inline.
remove the default padding from #slideshow.
Try this CSS:
.container {
position: relative;
width:15em;
display:inline-block;
}
#slideshow {
position: relative;
list-style-type: none;
padding:0;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
Here's a fork of your Pen.

Answer 2

You need to give a width and height to .container and center it.
Set in absolute prev and next, add some padding to .container so it has room for buttons. http://codepen.io/anon/pen/MKERWZ
.container {
position: relative;
width: 15em;/* 3x5em of lis */
height:15em;
padding: 0 4em;/* room on left/right for buttons */
margin: auto;
background: gray;/* demo purpose, lets see where it stands */
}
#slideshow {
list-style-type: none;
margin:0 ;
padding:0;
}
.current {
z-index: 99;
}
#slideshow li {
position: absolute;
width: 5em;
height: 5em;
background-color: #333;
font-size: 3em;
color: #fff;
}
#prevLink,
#nextLink {
position:absolute;
top:50%;
line-height:0;/* to set in center without translate() */
}
#prevLink {left:0.75em;
}
#nextLink {right:0.75em;
}