laying out divs horizontally with content within it - html

Question

I am trying to layout my div holding three divs within it. The application uses Bootstrap. They don't seem to be laying out properly with all text or buttons in the center. I am using a separator between the second and third boxes. The application also uses another class content-header which is from the proui library used elsewhere in the application and borrowed here for maintaining the same look and feel across the application.
This is the simplified HTML
<!--FIXED PANEL-->
<div class="content-header fd">
<!-- first box-->
<div class="col-md-6 fdc" style="display:block; visibility:visible">
first box
</div>
<!--second box-->
<div class="col-md-2 fdc" >
second box
<span class="pipe_separator">|</span>
</div>
<!--third box-->
<div class="col-md-4 fdc text-left">
third box
</div>
</div>
Here is the CSS
.fd{
position: fixed;
top: 70px;
width:100%;
background-color: #141313ad;
z-index: 1
}
.fdc{
display: inline-block;
*display: inline; zoom: 1;
vertical-align:middle;
background-color: #141313e5;
height: 75px;
border-color: black;
}
.pipe_separator{
font-size: 40px;
}
}
</style>
here is what it looks like
As you can see the content of the boxes are not aligned. I want the third div and its contents to be where I have drawn it out with the number 3 within. The separator just about to its left where I have drawn the green line and the second div to the left of the separator and the first div to the left of the second div. The main div holding these three layers acts as a fixed panel below the page header. How do I make them align together and sit as I have described.

Answer 1

Simplest hack is to put them in a table with no borders. It will work as follows:
<div class="content-header fd">
<table borders="0">
<tr><td>
<!-- first box-->
<div class="col-md-6 fdc" style="display:block; visibility:visible">
first box
</div>
</td>
<td>
<!--second box-->
<div class="col-md-2 fdc" >
second box
<span class="pipe_separator">|</span>
</div>
</td>
<td>
<!--third box-->
<div class="col-md-4 fdc text-left">
third box
</div>
</td>
</tr>
</table>
</div>