Align 3 elements in css - html

Question

I have 3 elements which I want to align in my html file. I have attached a sample image, the first image just has a left margin and is vertically centered. the middle element is vertically and horizontally centered and the third element has right margin and is vertically centered.
I can independently align elements horizontally and vertically with below code :
#element{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
but when it comes to align elements along each other they don't place correctly.
I'll appreciate if you can help me with this.
Thanks very much

Answer 1

You can try the following:
.left_item {
float: left;
width: 10%;
}
.right_item {
float: right;
width: 10%;
}
.center_item {
float: left;
width: 80%;
}

Answer 2

I managed to solve it with below code :
<header id="header">
<div id="element1Container">
<img id="element1" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element2Container">
<img id="element2" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element3Container">
<img id="element3" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
</header>
and here's the css:
#header{
background:#2b2b2b;
height : 8.5%;
width : 100%;
position : absolute;
}
#header #element1Container{
position : relative;
height : 100%;
width : 25%;
float : left;
}
#header #element1Container img{
height : 65%;
top : 50%;
position : relative;
float : left;
margin-left : 4%;
transform : translate(0,-50%);
}
#header #element2Container{
position : relative;
float : left;
height : 100%;
width : 50%;
}
#header #element2Container img{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
#header #element3Container{
position : relative;
float : right;
height : 100%;
width : 25%;
}
#header #element3Container img{
height : 65%;
top : 50%;
position : relative;
float : right;
margin-right : 4%;
transform : translate(0,-50%);
}