Making a div expand to available width, alongside an h1/h2 tag

Question

Here's a JSFiddle:

http://jsfiddle.net/cKuUy/2/

---

Here's a screenshot of what I'm aiming for:

And what I'm getting in my browser:

The key difference is that in the actual implementation, the bars do not fill the available width of the containing div element. If I place: width:100% , the bar expands to it's container width, but goes down, below the text; despite both elements being floated left.

Any suggestions?

Answer 1

This solution should help: https://stackoverflow.com/a/1767270/1472586

Basically remove float: left and width from the bars and add overflow: hidden to them. You may also have to adjust your margins accordingly (right padding on the headings might work better, for example).