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/

Answer 2

Something like this:

// Html
<h2>Header Stuff</h2>
<hr/>

// Css
h2
{
  background-color: #FFFFFF;
  display: inline-block;
  margin: 0 0 0 50px;
  padding: 0 10px;
}

hr
{
  margin-top: -13px;
}