html - How to style in HR on left and right hand side of div?

Question

How can I style in an HR to the left and to the right of my text within an existing div?

Something like this:

--- Header Stuff -----------------------------------

Answer 1

If you want to use an HR-tag, you could use negative margins on a div to position it on-top of the hr, to accomplish what you have described.

// HTML
<hr />
<div class="headline">A headline text</div>

// CSS
.headline {
    background-color: #fff;
    position: relative;
    margin: -20px 0 0 20px;
    float: left; 
}

Put together in a fiddle: http://jsfiddle.net/WmbsG/