Embed prev and next buttons into image - html

Question

I have the following simple HMTL and CSS code which you can also find in the JSfiddle here:
body {
height: 500px;
}
.image {
width: 100%;
height: 30%;
background-color: blue;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_details {
height: 100%;
width: 100%;
background-color: yellow;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image img {
height: 100%;
width: 100%;
display: block;
float: left;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.prev_button {
float: left;
width: 20%;
background-color: blue;
}
.next_button {
float: right;
width: 20%;
text-align: right;
background-color: blue;
}
<div class="image">
<div class="image_details"> <img src="http://placehold.it/101x101"> </div>
</div>
<div class="prev_button"> PREVIOUS </div>
<div class="next_button"> NEXT </div>
As you can see in the code above I want to have an image and a prev and next button. However, instead of having the prev and next buttons below the image I would like to have them on the left center and on the right center in the image.
What do I have to change in my code to make this work?

Answer 1

One easy method is to use absolute positioning. Insert the buttons as children of .image and set the parent to position: relative. The children need position: absolute; and have to be positioned, as you can see in my full example. I also remove the heights from your CSS so avoid stretching the img.
body * {
box-sizing: border-box;
}
.image {
width: 100%;
background-color: blue;
border-style: solid;
border-width: 1px;
position: relative;
}
.image_details {
width: 100%;
background-color: yellow;
border-style: solid;
border-width: 1px;
}
.image img {
width: 100%;
display: block;
background-color: red;
border-style: solid;
border-width: 1px;
}
.prev_button, .next_button {
width: 20%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: blue;
}
.prev_button {
left: 0;
}
.next_button {
right: 0;
text-align: right;
}
<div class="image">
<div class="image_details"><img src="http://placehold.it/101x101"></div>
<div class="prev_button">PREVIOUS</div>
<div class="next_button">NEXT</div>
</div>