How to float two divs above an image? - html

Question

I have two divs and two images in one div. The images are stacked. The div they are inside is relative and the images and the two divs are absolute. Now I want to float one div on the right side but it didn't work .
Here is my fiddle : https://jsfiddle.net/2vrq243v/2/
#newsline {
position: relative;
padding-top: 60px;
transition: 0.5s;
width: 100%;
height: 400px;
overflow: hidden;
}
#newsline a img {
position: absolute;
transition: 1s;
height: 360px;
width: 90%;
margin: 20px 5% 20px 5%;
}
.move {
z-index: 1;
width: 100px;
height: 100px;
display: table;
position: absolute;
border-radius: 50px;
margin-top: 150px;
cursor: pointer;
background-color: rgb(255, 255, 255, 0.25);
}
.move:hover {
background-color: rgb(255, 255, 255, 0.6);
}
.move p {
height: 100%;
text-align: center;
vertical-align: middle;
display: table-cell;
color: rgb(250, 255, 255, 0.7);
font-size: 250%;
background-color: none;
}
.move p:hover {
color: darkslategrey;
}
.next {
float: right;
}
.previous {
margin-left: 6%;
}
<div id="newsline">
<div class="move next">
<p>⮚</p>
</div>
<div class="move previous">
<p>⮘</p>
</div>
<img src="https://www.planwallpaper.com/static/images/8ccb4ec4225b290726ae9be975220ff4.jpg" id="img1">
<img src="http://hdwpro.com/wp-content/uploads/2017/11/Awesome-Wallpaper.jpg" id="img2">
</div>

Answer 1

I think you want something like this? You can adjust the position of the two divs using the left and right property, this is possible because they have the position: absolute.
JSFiddle
.next {
right: 6%;
}
.previous {
left: 6%;
}

Answer 2

Hey whenever you are using a position in css use left, right instead of float left or right. Your Problem can be solved by following code:
.next {
right: 55px;
}
Remove float:right; use right and give the required value

Answer 3

For the proper positioning of controls use:
.next {
right: 0;
margin-right: 6%
};
.previous {
left: 0;
margin-left: 6%;
}