Previous and next button positioning

HTML & CSS
1

Hi guys,

i have a jquery caousel on my webpage, it works fine but im confused on how to get the previous and next buttons to display either side of the carousel

this is what it currently looks like

i want the buttons to display where the red dots are, they are currently displayed beneath the caousel

here is my css


#wrapper {
	margin: 0 auto;
	width: 980px;
}

.image_carousel {
	padding: 16px 0 10px 40px;
}

.image_carousel img {
	border: 1px solid #fff;
	margin: 7px;
	float: left;
}

.image_carousel a {
	margin: 0;
	border: 0;
	padding: 0;
	float: left;
}

a.prev, a.next {
	width: 23px;
	height: 23px;
	top: 50px;
}

a.prev {
	background: url(images/left.jpg) no-repeat transparent;
	float: left;
}

a.next {
	background: url(images/right.jpg) no-repeat transparent;
	float: right;
}


a.prev span, a.next span {
	display: none;
}

.clearfix {
	float: none;
	clear: both;
}

#carousel-wrapper {
	width: 980px;
	margin: 0 auto;
}

html

<div id="wrapper">
	 	
    	
<div class="image_carousel">
	    <div id="foo2">
	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
                <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
                <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
	    </div>
	    <div class="clearfix"></div>
</div>
        <div id="carousel-wrapper">
	 	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
		<a class="next" id="foo2_next" href="#"><span>next</span></a>
    	</div>
      


  
</div><!--closes wrapper-->

any ideas? help is appreciated :slight_smile:

2 
a.prev { float: left; }

This rule aligns the previous button to left.

a.next { float: right; }

This rule aligns the next button to right.

a.prev, a.next { top: 50px; }

This rule sets the vertical alignment.

3

thanks for the tip, top:50px wasnt working before, i applied a position:relative to the class and it works now

thanks :slight_smile: