How to create a vertical hr line?

Question

I don't know why my hr line won't show up.

I believe this is either a problem with my browser (I'm using chrome) or I did something wrong.

I tried to darken the color but it still won't show up.

Here is the CSS code

#hr
 {
   background-color:#C80000;
   color:#C80000;
   -webkit-transform:rotate(90deg);
   position:absolute;
   left:130px;
   border:2px;
 }

And the HTML for that is

<hr id"hr">

Here is the full code:http://pastebin.com/R0C5YBrr

I don't really know how to help, but I wanted to comment that `vertical hr` does make me chuckle. — admdrew, Nov 04 '13 at 17:49
Its possible to create a vertical hr line. Lol. http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm — user2953526, Nov 04 '13 at 17:53
I just want them to correct my code because the line won't show. — user2953526, Nov 04 '13 at 17:54
The lols come from the fact that
means HORIZONTAL rule, which you're trying to make vertical, but that's not to discount the benefit of doing this. — MaKR, Nov 04 '13 at 19:23

score 2 · Answer 1 · answered Nov 04 '13 at 19:17

When you position something absolutely, it's not only removed from the document flow, it shrinks to fit its contents. Given that you provided your hr no width or height, you won't see it.

jsFiddle example

Try:

#hr {
    background-color:#C80000;
    color:#C80000;
    -webkit-transform:rotate(90deg);
    position:absolute;
    width:100px;
    height:2px;
    left:130px;
    border:2px;
}

score 1 · Answer 2 · answered Nov 04 '13 at 19:21

This should work in your browser, but will fail in others the way you've written it: http://caniuse.com/#feat=transforms2d

You should add prefixes for -moz-, -ms-, -o-, and the generic transform without prefix. Without these they won't be cross browser. With that being said, to correct your problem I'd specify both height & width. Being that it's rotated 90 degrees, it'll be default height for the width and default width for the height, which is 100% width of the parent element. Your height won't likely match the element width. Remember this is a transform, not a true rotate. If you use your browser's element inspector and highlight it does it show anywhere? possibly off the page?

My dirty trick: if it's separating 2 divs, for example, put a border-left or border-right on one of the divs. Fake it :D

score 0 · Answer 3 · answered Nov 04 '13 at 19:15

0

I don't know where you want it to appear, but to get it to show, just remove position:absolute; from your #hr selector.

answered Nov 04 '13 at 19:15

John H

14,422
4
41
74

score 0 · Answer 4 · edited Nov 02 '21 at 22:12

0

In the CSS I noticed you called the ID selector hr. Ih I'm not mistaken, this is a reserved keyword, so try to change the code like this:

#myhr
 {
   background-color:#C80000;
   color:#C80000;
   -webkit-transform:rotate(90deg);
   position:absolute;
   left:130px;
   border:2px;
 }

Also, the background-color and color are the same, so the color should be "inside" the background-color. and:

<hr id="myhr">

edited Nov 02 '21 at 22:12

desertnaut

57,590
26
140
166

answered Nov 04 '13 at 19:16

ShayR

169
1
2
10

No, hr isn't a reserved keyword in CSS. It's totally fine, although giving an hr the id of hr when there are no other hr's is unusual. – j08691 Nov 04 '13 at 19:19

How to create a vertical hr line?

4 Answers4