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

My problem is best outlined with this schematic/image which outlines how I want it to look:

!

I have a background image and 2 divs for text over the top of it (headline, and intro-text). I also have 2 divs on either side of the headline - these are for the white horizontal stripes.

My issue is that the headline is changeable in a CMS, and I want the horizontal white stripes to automatically fill up the space to the left and to the right of it, regardless of the headline's width.

I can't figure out how to make those 2 horizontal white stripes resize automatically.

Here's 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's my CSS - ignore the widths specified for the left-stripe and right-stripe - they're 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;
}

Ideas? Please let me know if I can provide more detail.

Answers


I'm a bit too busy to actually test this, but this might give you some direction. i'm not sure the exact effect you're trying to achieve (see comment about finding a live demo someone made).

Regardless, this kind of fluid layout is a bit difficult to achieve reliably with straight CSS. To make it easier I would suggest making the right-stripe a static width.

This CSS solution MIGHT work... no promises.

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

Using javascript would make it really easy though... here's how i would do it with jQuery. Again, I would make the right-stripe a static width to achieve this effect.

(same markup...)

..

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

Need Your Help

Cannot Convert Const Char to Char?

c++ pointers constants default-value

I'm having trouble with conversion. I cannot use strings in this program so I have to use char's - I get the error:

matlab plot dollar symbol on axis

matlab

I'd like the tick-mark labels on an axis to be represented in terms of dollars ($).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.