Float right is floating left?

Float right is floating left?

I have two arrow nav items that I want to float left and right and they
are positioned absolutely and have a higher z-index than everything on the
page. But I'm having an issue.
<div id="slider-nav">
<a href="#" id="next"></a>
<a href="#" id="prev"></a>
</div>
Then I have the CSS where I want the two items to float left or right.
#next {
display: block;
width: 8px;
height: 12px;
background-image:url(images/next.png);
z-index: 999;
position: absolute;
float: right;
}
#prev {
display: block;
width: 8px;
height: 12px;
background-image:url(images/prev.png);
z-index: 999;
position: absolute;
float: left;
}
#slider-nav {
width: 100%;
height: 12px;
position: absolute;
z-index: 100;
}
What happens is that the block that SHOULD float right ends up floating
left on top of the left floating block. I tried adding the clear fix after
the floating elements and inside the container div to no avail.