CSS: 3 divs - resizing 2 outer divs automatically based on the width of the inner div / text

Question

My problem is best described in this diagram / image, which shows how I want it to look:

!

I have a background image and 2 divs for text on top of it (title and intro text). I also have 2 divisions on either side of the header - this is for white horizontal stripes.

My problem is that the title can be changed in CMS, and I want the horizontal white stripes to automatically fill the space to the left and right of it, regardless of the width of the title.

I can't figure out how to get these two horizontal white stripes to automatically resize.

Here is my HTML:

<div id="masthead">
<div id="headline-container">   
    <div id="left-stripe">&nbsp;</div><div id="headline">{headline}</div><div id="right-stripe">&nbsp;</div>
</div>
<div class="clear-both">&nbsp;</div>
<div id="intro-text">{intro_text}</div>
</div>

And here is my CSS - ignore the width specified for the left and right stripes - they are just placeholders:

#masthead {
    height: 260px;
}

div#headline-container {
    width:960px;
    padding:none;
}
div#left-stripe{
    float: left;
    background-color:#fff;
    height: 3px;
    width:500px;
    display: inline;
}
div#right-stripe{
    float: right;
    background-color:#fff;
    height: 3px;
    width:100px;
    display: inline;
}
div#headline {
    text-align:right;
    color: #fff;
    font-size: 200%;
    float: left;
    display: inline;    
}
div#intro-text {
    text-align: left;
    float: right;
    width: 300px;
    color: #fff;
}

? , , .

Answer 1

, , - . , (. -, -).

, CSS. , .

CSS ... no promises.

<div class="container">
  <div class="headline-container">
   <div class="left-stripe"></div>
   <div class="headline">Headline goes here</div>
   <div class="right-stripe></div>
  </div>
  <div class="content"></div>
</div>

CSS

//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }

javascript , ... jQuery. , .

( ...)

..

JS

var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);

Answer 2

UPDATE CSS: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/

, #masthead #headline-container. ton, , . div.line , , .

: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/

Answer 3

, , jQuery. 3 div, div 2- div, .

, : $("#whole-div").width() - $("#inner-div").width() div. , -div, div. : div 1000px, div 200px, div 600px . 600px div ($("#whole-div").width() - $("#inner-div").css('left')) 200px div ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()). , background-repeat div, .

, !