3 columns/divs - two fluid, middle fixed and centered - css

Question

i am trying to make a kind of responsive header for my website. it should work in this way: fluid div - fixed and centered - fluid. All three cols are filled with content. The problem is that middle column is not always centered and fluid are not equal width.
jsfiddle: http://jsfiddle.net/6f87f/
<div class="header">
<div class="fluid-col">
1234
</div>
<div class="fixed-col">
<h1>Orfin Studio</h1>
</div>
<div class="fluid-col">
123
</div>
</div>
CSS
.header {
display: table;
width: 100%;
height:120px;
text-align:center;
}
.header > div {
display: table-cell;
vertical-align:middle;
}
.fixed-col {
width:200px;
color: white;
}
.fluid-col {
background:pink;
}
why is that?;/ thanks!

Answer 1

Im not sure that exactly you want but try this :
FIDDLE
<div class="header container">
<div class="col col-1">
COL 1
</div>
<div class="col col-2 custom-width">
COL 2
</div>
<div class="col col-3">
COL 3
</div>
</div>
css :
.header {
display: table;
width: 100%;
height:120px;
text-align:center;
}
.header > div {
display: table-cell;
vertical-align:middle;
}
.col {
width:20%;
}
.custom-width {
min-width:300px; // change the value as you want with width and min-width
background:pink;
}

Answer 2

http://jsfiddle.net/RzhDD/
html
<div id="header">
<div class="fluid-col twintypercent">
Left Col
</div>
<div class="fluid-col sixtypercent">
<div class="fixed-col">
Centered Column
</div>
</div>
<div class="fluid-col twintypercent">
Right Col
</div>
css
#header {
width:100%;
}
.fluid-col {
float:left;
}
.Tpercent {
width:20%;
}
.sixtypercent {
width:60%;
text-align:center
}
.fixed-col {
margin:auto;
width:200px;
text-align:left;
}