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

i want align 3 different child div horizontally. these 3 div contain 1 image (with height et width px). there link hover each div (but want onmouseover on image , not on space left in div). don't want div take each 33% of screen.

but want left image totally on left side on screen, central image on center, , third image totally on right side of screen

my parent div absolute, , child div relative float (i don't know if thing or not).

my example 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; } 

-> right div not placed correctly.

how that?

i following.

use absolute positioning place .controls_prev left , .controls_next right.

keep .controls_toggle in regular flow , use margin: 0 auto center it. works because both .controls_prev , .controls_next have 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>