How to align 3 child div in a parent div - html

Question

I want to align 3 different child div horizontally.
these 3 div contain 1 image (with height et width px). There is a link hover each div (but i want my onmouseover to be only over the image and not over the space left in the div).
So i don't want that my div take each 33% of the screen.
But i want my left image totally on the left side on the screen, my central image on center, and my third image totally on the right side of the screen
My parent div is absolute, and child div are relative with float (i don't know if is the good thing or not).
My example is here:
https://jsfiddle.net/mytom/eabgewnf/
My HTML:
<div class="controls">
<div class="controls_prev"></div>
<div class="controls_toggle"></div>
<div class="controls_next"></div>
</div>`
My CSS:
.controls {
position:absolute;
width:100%;
height:100px;
top:50%;
margin-top:-37px;
display:block;
}
.controls_prev {
opacity: 0.6;
position:relative;
width:78px;
height:100px;
float:left;
border: solid 1px #40b2d6;
}
.controls_toggle {
opacity: 0.6;
position:relative;
width:78px;
height:100px;
margin:0px auto !important;
border: solid 1px #40b2d6;
}
.controls_next {
opacity: 0.6;
position:relative;
width:78px;
height:100px;
float:right;
border: solid 1px #40b2d6;
}
-> My right div is not placed correctly.
how to do that?

Answer 1

I would do the following.
Use absolute positioning to place .controls_prev to the left and .controls_next to the right.
Keep .controls_toggle in regular flow and use margin: 0 auto to center it. This works well because both .controls_prev and .controls_next have the same width.
.controls {
position: absolute;
width: 100%;
height: 100px;
top: 50%;
margin-top: -37px;
display: block;
border: 1px dotted blue;
}
.controls_prev {
opacity: 0.6;
position: absolute;
width: 78px;
height: 100px;
top: 0px;
left: 0px;
border: solid 1px #40b2d6;
}
.controls_toggle {
opacity: 0.6;
width: 78px;
height: 100px;
margin: 0 auto;
border: solid 1px #40b2d6;
}
.controls_next {
opacity: 0.6;
position: absolute;
width: 78px;
height: 100px;
top: 0px;
right: 0px;
border: solid 1px #40b2d6;
}
<div class="controls">
<div class="controls_prev"></div>
<div class="controls_toggle"></div>
<div class="controls_next"></div>
</div>

Answer 2

Too many changes to list, but this should work. Note the reordering of the markup.
.controls {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 0;
margin-top: -37px;
background: #ddd;
}
.controls_prev {
opacity: 0.6;
position: relative;
width: 78px;
height: 100px;
float: left;
border: solid 1px #40b2d6;
}
.controls_toggle {
opacity: 0.6;
position: relative;
width: 78px;
height: 100px;
margin: 0 auto;
border: solid 1px #40b2d6;
}
.controls_next {
opacity: 0.6;
position: relative;
width: 78px;
height: 100px;
float: right;
border: solid 1px #40b2d6;
}
<div class="controls">
<div class="controls_prev"></div>
<div class="controls_next"></div>
<div class="controls_toggle"></div>
</div>

Answer 3

Try this.
.controls {
position: absolute;
width: 100%;
height: 100px;
top: 50%;
margin-top: -37px;
display: table;
table-layout: fixed;
}
.align {
display: table-cell;
vertical-align: top;
width: 100%;
padding:3px; /* just for show */
}
.inner {
border: solid 1px #40b2d6;
opacity: 0.6;
height: 100px;
}
<div class="controls">
<div class="controls_prev align">
<div class="inner"></div>
</div>
<div class="controls_toggle align">
<div class="inner"></div>
</div>
<div class="controls_next align">
<div class="inner"></div>
</div>
</div>

Answer 4

I've updated your fiddle to set each div's display to table-cell and added display: table to the container. Is this what you're after?
https://jsfiddle.net/eabgewnf/17/
CSS:
.controls{
position:absolute;
width:100%;
height:100px;
top:50%;
margin-top:-37px;
display:table;
}
.controls_prev{
display:table-cell;
opacity: 0.6;
height:100px;
border: solid 1px #40b2d6;
}
.controls_toggle{
display:table-cell;
opacity: 0.6;
height:100px;
top:0px;
left:0px;
border: solid 1px #40b2d6;
}
.controls_next{
display:table-cell;
opacity: 0.6;
height:100px;
border: solid 1px #40b2d6;
}
HTML:
<div class="controls">
<div class="controls_prev">left</div>
<div class="controls_toggle">this is the center</div>
<div class="controls_next">right</div>
</div>

Answer 5

To achieve that, I would use a table since is very useful. If you set the table width to 100vw (100% of the screen) and play with the percentages as you want.
.controls{
position:absolute;
width:100vw;
height:100px;
top:50%;
margin-top:-37px;
display:block;
table-layout: fixed;
}
.controls_prev{
opacity: 0.6;
width:20vw;
height:100px;
top:0px;
left:0px;
border: solid 1px #40b2d6;
}
.controls_toggle{
opacity: 0.6;
width:20vw;
height:100px;
top:0px;
left:0px;
border: solid 1px #40b2d6;
}
.controls_next{
opacity: 0.6;
width:20vw;
height:100px;
top:0px;
right:0px;
border: solid 1px #40b2d6;
}
.controls_separation{
width:20vw;
}
<table>
<tr class="controls">
<td class="controls_prev"></td>
<td class="controls_separation"></td>
<td class="controls_toggle"></td>
<td class="controls_separation"></td>
<td class="controls_next"></td>
</tr>
</table>