CODEWITHSUNDEEP
htmlcss
user3187469
user3187469

Reputation: 1531

How to make <hr> full width?

I want to make this <hr> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).

.single-article .article-container-inner {
    background: #f0eded;
    border: 1px solid #c9c7c7;
    padding: 20px;
    margin-bottom: 20px;
}
.single-article hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
    width:100%
}
<div class="article-container single-article">
    <div class="article-container-inner">
        <hr>
    </div>
</div>

(also at http://jsfiddle.net/bh2f6/1/)

Is there a better solution for this?

Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.

Upvotes: 22

Views: 53097

Answers (5)

ArifMustafa
ArifMustafa

Reputation: 4965

HR Secret things, you must know.

When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.

<hr class="my-hr-line">

.my-hr-line {
    position: relative;
    left: -15px;
    width: calc(100% + 30px);
    height: 2px;
    border: 2px solid blue;
}

Hope it will help many one.

Upvotes: 3

Alistair Chisholm
Alistair Chisholm

Reputation: 628

Something like this might work...

hr {
  padding: 50px 0;
  border: none;

  &:before {
    // full-width divider
    content: "";
    display: block;
    position: absolute;
    right: 0;
    max-width: 100%;
    width: 100%;
    border: 1px solid grey;
  }
}

http://codepen.io/achisholm/pen/ZWNwmG

Upvotes: 4

Code Maverick
Code Maverick

Reputation: 20415

Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.

Change your CSS to this:

.single-article hr {
    margin: 30px -20px 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
}

See working jsFiddle demo

Upvotes: 20

Jatin
Jatin

Reputation: 3089

Removing Padding should work for you

Working Example

.single-article .article-container-inner {
    background: #f0eded;
    border: 1px solid #c9c7c7;
    margin-bottom: 20px;
}
.single-article hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
    width:100%
}

Upvotes: 2

Sebsemillia
Sebsemillia

Reputation: 9486

You mean like this?

Fiddle

just change the padding to padding: 20px 0;

Upvotes: 1

Related Questions