CSS div under divs
===

I'm not skilled with CSS, this is one of my first projects. I was trying to make a CSS style for a slider I have, I want something like this:

![Image Slider][1]

I've made succesfully the inner divs and the button divs, but what troubles me is the index order for the next/previous buttons on the slider.
Here is the HTML:

    <div class="slider">
  	<div><a href="#" id="rhandle">&gt;</a></div>
    <div><a href="#" id="lhandle">&lt;</a></div>
    <div id="loadingBar"></div>
    <div class="slide">
		<div id="leftSlide">
			<h1>WhiteFox Template</h1>
			<p>Buy this theme today with all features, All fonts included in this theme are for personal use only. <br />Detailed documentation included.</p>
			<a href="#" class="button">Read More</a>
		</div>
		<div id="rightSlide">
    		<img src="images/slides/slide-1.gif" width="259" height="184" alt="slide-1 Image" />
		</div>
		<div style="height:0;line-height:0;display:block;clear:both;"></div>
	</div>
	
  </div>

and here is the CSS for the slider:

    .slider {
	height: 329px;
	width: 794px;
	background: #313131;
	margin: 50px auto 80px;
	color: #FFF;
    }
    
    .slider a#lhandle {
		font-size: 24px;
		color: #FFF;
		background: #4bacfd;
		width: 50px;
		float: left;
		height: 23px;
		padding-top: 150px;
		padding-bottom: 150px;
		margin-top: 6px;
	}

	.slider a#rhandle {
		font-size: 24px;
		color: #FFF;
		background: #4bacfd;
		width: 50px;
		float: right;
		height: 23px;
		padding-top: 150px;
		padding-bottom: 150px;
		margin-top: 6px;
	}

	.slider a#lhandle:hover,
	.slider a#rhandle:hover {
		color: #4bacfd;
		background: #FFF;
		border: 1px solid #4bacfd;
		width: 48px;
		height: 21px;
	}

	.slider #loadingBar {
		background: #a0a0a0;
		height: 6px;
	}

	.slider .slide {
		height: 328px;
		width: 793px;
		position: relative;
	}



	.slider .slide h1 {
		text-transform: uppercase;
		font-size: 24px;
		font-weight: bold;
		margin-top: 50px;
		margin-bottom: 25px;
	}

	.slider .slide div#leftSlide {
		float: left;
		width: 400px;
		height: 328px;
	}


	.slider .slide div#rightSlide {
		float: right;
		height: 328px;
		width: 280px;
	}

	.slider .slide img {
		border: 1px solid #FFF;
		margin-top: 25%;
		margin-bottom: 25%;
	}

	.slider .slide p {
		display: block;
		text-align: justify;
		margin-bottom: 30px;
		margin-right: 30px;
		margin-left: 30px;
		font-size: 18px;
		line-height: 28px;
	}

This way, the next/previous buttons are below the actual content, when you hover over them, they do not change to ":hover" style. I've tryied adding a "z-index: 5" property, but that did not work, how can I achieve this (If there is an easier way, let me know).


  [1]: http://i.stack.imgur.com/Q9pfs.png