inline divs fill width - html

Question

I am trying to make a fancy header. Here is the JSFiddle for you to see how it looks like before I explain my issue.
This header is great in medium/big screen width, but the problem comes at smaller screen width, where the text does not fit in that width and gets overlapped by the right div.
Here is the html/css(same as JSFIddle). Below I will explain what I want to achieve
html:
<div class="header">
<div class="left"></div>
<div class="text">
<span>TITLE</span>
</div>
<div class="right"></div>
</div>
css:
div.header{
height:30px;
font-size:30px;
width:100%;
margin-top:100px;
display: block;
margin-bottom:30px;
}
div.header .left{
background-color: #D82B38;
width:10%;
height:30px;
display: inline-block;
float:left;
border-radius:0 15px 0 0;
}
div.header .text{
width:20%;
display: inline-block;
height:30px;
float:left;
}
div.header .right{
background-color: #D82B38;
width:70%;
height:30px;
display: inline-block;
float:right;
border-radius: 0 0 0 15px;
}
div.header .text span{
font-size:30px;
color: #D82B38;
position: relative;
top:-5px;
text-align:center;
display: block;
font-weight:500;
letter-spacing:1px;
}
I would like to give some left and right paddings to div.text, and make it's width depend on the size of the text, and then div.left and div.right takes their width depending on the remaining width of the screen(always being the left one a lot smaller than the right one), instead of always having the same percentage. I know I could play with media queries to change that percentage in smaller screens, but I know media queries does not work well in internet explorer and I prefer to avoid them.
I tried several things using CSS to get this, but I can't get it to work. Please tell me if my question is quite unclear and I will try to clarify what I mean.
Thanks in advance!
EIDT: I do not want to use javascript for this, I know there must be some way to achieve it using purely CSS

Answer 1

You can use Flexbox
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
vertical-align: middle;
}
.flex-item-fixed {
-webkit-flex: 0 70px;
flex: 0 70px;
text-align: center;
}
.flex-item-fixed1 {
-webkit-flex: 0 10%;
flex: 0 10%;
}
.left {
background-color: #D82B38;
display: block;
border-radius: 0 15px 0 0;
height: 30px;
}
.right {
background-color: #D82B38;
height: 30px;
display: inline-block;
float: right;
border-radius: 0 0 0 15px;
}
DEMO HERE

Answer 2

Flexible widths (percentages) are the key to responsive web design, but in some cases, this is not the way to go. In this case in particular, you want to keep the right side of the header responsive meanwhile the left side, including the text, is static. That avoids any flickering and movement, as well as excess #media queries. You can keep the responsiveness by employing the calc function.
Here is what I did. I gave the left side and the text a 350px width shared between the two. (100px and 250px). 350px is well within the width of any smartphone. And I told the right side to make it 100% - 350px. That makes the right side respect the left side and adjust accordingly.
SCSS/LESS - If you were using LESS or SCSS/SASS you will have a real winner here, because you can store these two fixed widths in variables and then if you ever needed to change these values, LESS or SCSS/SASS would adjust everything for you.
Here is your new CSS:
div.header{
height:30px;
font-size:30px;
width:100%;
margin-top:100px;
display: block;
margin-bottom:30px;
}
div.header .left{
background-color: #D82B38;
width:150px;
height:30px;
display: inline-block;
float:left;
border-radius:0 15px 0 0;
}
div.header .text{
width:200px;
display: inline-block;
height:30px;
float:left;
}
div.header .right{
background-color: #D82B38;
width: calc(100% - 350px);
height:30px;
display: inline-block;
float:right;
border-radius: 0 0 0 15px;
}
div.header .text span{
font-size:30px;
color: #D82B38;
position: relative;
top:-5px;
text-align:center;
display: block;
font-weight:500;
letter-spacing:1px;
}
And here is how it looks like in a DEMO
EDIT
As an alternative option, you can distribute the widths and use media queries to re-adjust. This is something you will be able to use in older browsers. To center the text accordingly, you have 2 options, 1. is depicted in my DEMO after I edited it. using position left and transform. And if that gives you problems with older browsers, option 2 is to wrap the text is another div and center align its content. See the DEMO again for the alternative option

Answer 3

This one works from IE8 but uses flex if it's supported by the browser.
div.header{
display: table;
height:30px;
font-size:30px;
width:100%;
margin-top:100px;
margin-bottom:30px;
}
div.header .left{
display: table-cell;
background-color: #D82B38;
width:10%;
height:30px;
border-radius:0 15px 0 0;
}
div.header .text{
display: table-cell;
width:20%;
height:30px;
}
div.header .right{
display: table-cell;
background-color: #D82B38;
width:70%;
height:30px;
border-radius: 0 0 0 15px;
}
div.header .text span{
font-size:30px;
color: #D82B38;
position: relative;
top:-5px;
text-align:center;
display: block;
font-weight:500;
letter-spacing:1px;
}
#supports (display: flex) {
div.header{
display: flex;
}
div.header .left{
display: block;
}
div.header .text{
display: block;
min-width: 90px;
}
div.header .right{
display: block;
}
}
<div class="header">
<div class="left"></div>
<div class="text">
<span>TITLE</span>
</div>
<div class="right"></div>
</div>