Nordax Nordax - 6 months ago 35
CSS Question

positioning navigation buttons on an image slider

I would like to position navigation buttons on an image slider and I want to be responsive. I tried doing that, but it only works if I set top position in pixels not in percentages. setting it in pixels isn't responsive.

<div id="container">
header is here
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
<div class="slides">
<img src="" alt="image1" class="slide active">
<img src="" alt="image2" class="slide">
<img src="" alt="image3" class="slide">




box-sizing: border-box;

#container {
width: 90%;
margin: 0 auto;

header {
background: black;
height: 20px;
padding: 1.5em;
color: white;

#carousel {
position: relative;
margin: 0 auto;
width: 45%;
background-color: #f4f4f4;
margin-top: 15px;
min-height: 100%;


.slide {
position: absolute;
max-width: 100%;

.sliderbuttons {

#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
width: 10%;
/*making the prev,next on top of content*/
z-index: 20;
#prev {
#next {

.active {
z-index: 10;

Here is what I have tried so far.


If you want to set position in percentages, you have to define percentage for the parent element. So try to add

html, body { height: 100%; position: relative; }

and height: 100% on #container too. I think (and hope !) it can help you.

(Sorry for my awful english)