CODEWITHSUNDEEP
htmlcss
joncodo
joncodo

Reputation: 2328

Make a Horizontal Rule with Css and have margins

div.horizontalRule {
    clear:both;
    width:100%;
    background-color:#d1d1d1;
    height:1px;
    margin-top:5px;
    margin-bottom:5px;
}

This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?

http://jsfiddle.net/fwqSH/

Upvotes: 9

Views: 28417

Answers (3)

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

Problem is your not closing the div:

You cannot close a div as you did there must be a closing tag as so:

<div></div>

and not

<div />

corrected jsfiddle:

http://jsfiddle.net/fwqSH/1/

EDIT

Final solution was to add a min-height of 1px because an empty div sometimes do weird things.

Final CSS:

div.horizontalRule {
    min-height: 1px;
    clear:both; width:100%;
    border-bottom:1px solid #d1d1d1;
    height:1px; padding-top:5px;
    margin-top:5px;
    margin-bottom:5px;
}

Upvotes: 9

creativeedg10
creativeedg10

Reputation: 691

If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" /> This may help resolve some div interaction glitches.

Upvotes: 2

sdleihssirhc
sdleihssirhc

Reputation: 42496

The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:

<div class="horizontalRule" runat="server"></div>

Upvotes: 2

Related Questions