Question

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.

Answer 1

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