Align 3 divs with expanding at the middle - html

Question

I want to make 3 divs(left, middle, right) in one line, the left and right divs with fixed width, while the middle one with expanding width(with percent use).
So far I tried couple of variants, but nothing do the job.
I want it something like that:
[...150px...][...100%...][...150px...]
While at the middle I'll be able to put a text that will brake line normally(without inline).
Sorry for my bad english.
I need it as much as possible adaptable for cross-browsering.

Answer 1

You can do like this:
.div1{
width: 150px;
float: left;
}
.div2{
width: 150px;
float: right;
}
.middiv{
width: calc(100% - 300px);
margin: 0 auto;
}
But I would recommend you to use width for middiv by calculating yourself. For eg:
If the parent div width is 1000px then your middiv would be 1000 - 300 = 700px

Answer 2

This should work:
HTML:
<div class="table">
<div class="row">
<div class="fixedCell"></div>
<div class="cell"></div>
<div class="fixedCell"></div>
</div>
</div>
CSS:
.table{
width:100%;
height:20px;
display:table;
}
.row{
display:table-row;
}
.fixedCell {
width:150px;
display:table-cell;
background-color:red;
}
.cell{
display: table-cell;
background-color:green;
}
http://jsfiddle.net/yxt3gu11/

Answer 3

I would position the left and right parts absolutely and give the center a horizontal margin of 150px.
<div class="row">
<div class="left">left</div>
<div class="center">centered text</div>
<div class="right">right</div>
</div>
.row {
position: relative;
}
.left,
.right {
width: 150px;
background-color: #f99;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
margin: 0 150px;
}
Or see http://codepen.io/ckuijjer/pen/Fygow . If the left and right parts might have more content, add a clearfix to the row.