css fluid fluid fluid layout - css

Question

I'm trying to achieve something quite tricky in CSS, but also quite "simple" :
Explanation:
Some element with text inside it (unknown width) with 2 elements on each side of it, both occupying the remaining space.
I thought of going with display:table for the container and for the 3 children going display:table-cell but it just doesn't work, or I don't know how to use it properly..

Answer 1

Demo playground
HTML
<header>
<h1>Some title</h1>
</header>
CSS
header{
display:table;
text-align:center;
width:50%;
}
header:before, header:after{
content:'';
display:table-cell;
background:red;
width:50%;
border-radius:5px;
}
header > h1{ white-space:pre; padding:0 10px; }

Answer 2

This is using display: table and display: table-cell to make this bar and text.
HTML
<div class="textBarContainer">
<div class="textBarBefore"></div>
<div class="textBar">Text</div>
<div class="textBarAfter"></div>
</div>
CSS
.textBarContainer {
display: table;
width: 100%;
}
.textBar {
display: table-cell;
padding: 0 10px;
white-space: pre;
}
.textBarAfter, .textBarBefore {
background: #cc0000;
width: 50%;
height: 20px;
display: table-cell;
content:' ';
border-radius: 5px;
}
Demo

Answer 3

<ul class="columnlayout">
<li>
<div>Left content</div>
</li>
<li class="centercontent">
<div>middle text content</div>
</li>
<li>
<div>Right content</div>
</li>
</ul>
//columns layout
ul.columnlayout
{
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
> li
{
float:left;
margin:0;
list-style-type:none;
width:200px;
&.centercontent
{
width:auto;
}
ul.xoxo
{
list-style-type: none;
li
{
list-style-type: none;
}
}
}
}
oh, pardon my .scss!
ul.columnlayout {
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
}
ul.columnlayout li {
float:left;
margin:0;
list-style-type:none;
width:200px;
}
ul.columnlayout li.centercontent {
width:auto;
}