Question

I’m trying to make a section header that has:

HEADER NAME ————————————————-

Where the multiple —-‘s are the horizontal rule. Sadly, hr‘s like to take up their own line.

Any ideas? I would really prefer to do this all in CSS and HTML.

Answer 1

You’re better off doing this using a table with two coulmns.

So your HTML would be something like this:

<table>
    <tr>
        <td><h1>MOO</h1></td>
        <td class="long"><hr /></td>
    </tr>
</table>

and your CSS something like this:

.long {
    width:100%;
}

Here is the an example of this:

http://jsfiddle.net/nayish/xzcX2/