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; }