Div to Fill Remaining Width

Question

I'm trying to make this blue line (a div) automatically fill the rest of the space The width of the container is fixed to 800px but the h1 changes width depending on the length of the text.

About us

is longer than

Services

etc.

I can use something like 80% percent and it works but it doesn't fill the remaining and looks ugly...

How would you do that?

Thanks

Answer 1

You could simply make the line the width of the overall box but then hide the overflow:

http://jsfiddle.net/yZ2KJ/

Answer 2

You could have a line that goes across the whole container, and have a background color on the text that hides the line.

Answer 3

An easy way would be to make the line 100% of the width, and position the text over it with an opaque background.