How to clear a fixed height div and inner span?

So I found an answer in this question when I was looking for a replacement for the hr tag that would allow me to input some text in the middle of the hr. It works and looks great, but there is an issue (worthy of it's own question I believe). Anything right below the separator is clipped and hidden by the span's background color.

<div style="height: 2px; background-color: #006600; text-align: center;">
    <span style开发者_StackOverflow="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

http://jsfiddle.net/xZn6c/

What do I need to do to make it so that there can be no overlapping at all between the span and anything that comes after? I've tried wrapping the separator in another div and using clear, overflow, ect but nothing I can think of works in actually making the other div get out of the way of the span. Is what I want to do even possible with the current separator or do I need to alter that?

You should just be able to add a margin-bottom to the div containing the span.

<div style="height: 2px; margin-bottom:0.6em; background-color: #006600; text-align: center;">
    <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

Try this:

<div style='margin-top:10px'>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

Just add padding to your div style. Looks like padding:5px would take care of it.

<div style="padding:10px;height: 2px; background-color: #006600; text-align: center;">
   <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>