Well I'm looking to create a horizontal line that stops 25px before a heading and start again 25px after a heading like so:




any ideas?

Why not use that picture you posted?
Otherwise, three divs with float left and apropriate margins. Make the first and third div have height 1px and some background color.

Very simple.

hr set at 100%

hn heading with

 position: relative;
 display: inline;
 padding: 0 25px;
 z-index: 10;
 top: -{heading font size/2};
 margin-bottom: -{same value as top};

     <div>
     <hr>
     <hn>Design ...</hn>
</div>

Decided to play with the idea.
http://www.modtalk.co.uk/_site/code/...ading-overlay/

Originally Posted by chrishirst

Very simple.

hr set at 100%

hn heading with

 position: relative;
 display: inline;
 padding: 0 25px;
 z-index: 10;
 top: -{heading font size/2};
 margin-bottom: -{same value as top};

     <div>
     <hr>
     <hn>Design ...</hn>
</div>

simple, effective, and clever... Thank you. how do you then center the text however? When I set the display to inline, the text-align is ignored.

EDIT: I was able to center it by setting the containing div's text-align to center. Can you tell me why it works this way but not by setting the heading's text-align center?

With inline elements the width collapses to the size of the contents plus padding, so text align WILL be applied to the heading you cannot see any effect.

A heading is element is a block element by default which would normally be as wide as the parent container, so the text contained has "room" to be to the left, right or centred.

Very helpful thank you!

simple yet efficient.