Two div equally spaced form center above another div - html

Question

I need to have two divs with images equally spaced from the center of the page, one on the left and another one on the right, above central div.
I have tried to make an example in the following picture:
the main page div (flowers) is 1024 pixel, and the two right/left blue divs need to stay in the same position...
I am not that CSS expert ...how can I achieve this behaviour?
my CSS code so far:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(-60vw + 50%);
left: calc(-50% + 600px);
margin-left: -150px;
z-index: 100;
}
.overlay-right{
background-color: transparent !important;
background-image: url("/images/background-right.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(+130vw - 50%);
left: 1024px;
margin-left: 100px;
z-index: 100;
}

Answer 1

What you need is define a parent for your image (here #parent) and put image, and two other div[s] inside that parent.
You can do this:
#parent{
position:relative;
}
#parent img{
max-width:94%;
display:block;
margin:auto;
}
#parent> div{
width:50px;
height:300px;
background:rgba(125,125,255,0.5);
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#right{
right:0;
}
#left{
left:0;
}
<div id="parent">
<img src="http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg"/>
<div id="right"></div>
<div id="left"></div>
</div>

Answer 2

I think I managed the problem by using Calc.
I need to calculate half of the width of the page and then subtract or add a fixed number of pixels.
I Wa using Left with Calc with no luck, until I found this:
How to set the 'left' property of my div using css3 calc?
so basically I needed to use webkit-calc, moz-cal instead of simple "calc"
Now this is a snippet of working CSS:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
left:-webkit-calc(100%/2 - 842px);
left:-moz-calc(100%/2 - 842px);
left:calc(100%/2 - 842px);
z-index: 100;
}