How to clear a fixed height div and inner span?

Question

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="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?

Jeremy Battle · Accepted Answer · 2011-03-11T19:53:58.780

3

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>

edited Mar 11 '11 at 19:53

answered Mar 11 '11 at 19:38

Jeremy Battle

1,628
13
18

This works, I used margin instead of margin-bottom though, and an em value instead of pixels. I guess I was just really over thinking something that is so simple. – Crag Mar 11 '11 at 19:49
@Crag we all do that sometimes :) – Jeremy Battle Mar 11 '11 at 19:51
Updated sample to meet @subhaze's suggestion he is right 0.6em would be the most accurate value – Jeremy Battle Mar 11 '11 at 19:54

score 0 · Answer 2 · answered Mar 11 '11 at 19:38

0

Try this:

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

answered Mar 11 '11 at 19:38

user470714

2,788
26
33

score 0 · Answer 3 · answered Mar 11 '11 at 19:39

0

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>

answered Mar 11 '11 at 19:39

thenengah

40,969
31
109
154

Padding causes the 'line' in the div to grow as well, which isn't desired. Margin did provide what I needed though. – Crag Mar 11 '11 at 19:50

How to clear a fixed height div and inner span?

3 Answers3