How do I make a <hr /> tag go vertically, instead of its standard appearance as a horizontal line/going sideways?

I'd like to be able to use this on a mobile site, so a more widely-supported solution is preferable to one that only works in the latest browsers.

How do I make a <hr /> tag go vertically, instead of its standard appearance as a horizontal line/going sideways?

I'd like to be able to use this on a mobile site, so a more widely-supported solution is preferable to one that only works in the latest browsers.

• javascript
• html
• css

• 5 what do you mean 'go down instead of up' – dougmacklin Commented Feb 13, 2014 at 1:21
• you mean a vertical line instead of a horizontal line? – roo2 Commented Feb 13, 2014 at 1:22
• html spec defines hr as a down tag, if you want it to go up, use the <rh> tag /just kidding – roo2 Commented Feb 13, 2014 at 1:22
• sorry misspelling, fixed – Luiz Commented Feb 13, 2014 at 1:23
• 1 just put a border on the left side of the content you want the vertical line. – Patrick Evans Commented Feb 13, 2014 at 1:25

5 Answers 5

This will require changes to more than just the hr. the element above and below it must be floated. the effect can be achieved with a solid border:

<div class="section1"> content </div> 
<div class="section2"> more content </div>

CSS:

.section1 {  
    float: left; 
    width: 200px; 
    border-right: 1px solid #333;
}

.section2 { 
    float: left; 
    width: 200px;
}

Edit: see also this answer

You could use css transforms. However, this just turns it, things are still where they would be if you hadn't rotated it.

HTML

<hr/>
<hr class="vert" />
<hr id="vert1" />

CSS

/*All <hr>*/
hr {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    /* IE 9 */
    -webkit-transform:rotate(90deg);
    /* Safari and Chrome */
}
/*<hr> of class ".vert"*/
 hr.vert {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}
/*<hr> with id "vert1"*/
 hr#vert1 {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

Well you could possibly make a div (<div></div>) and then give it values with css later regarding height/width. If you want it to apply to one specific object give it an id <div id=""> and more than one object give it a class <div class="">

An example of the css you'd do is:

#(id name) or div.(class name) {
height: ; (how tall) 
width: ; (how wide you want it) 
background-color: ; (sets the color of the bar) 
position: ; (depends on if you want it absolute or static etc.) }

You can obviously add/remove other css as you go depending on what you want to do

Put it in a div:

<div style="border-right:1px solid #333;">
Content here
</div>

This is with inline css. Otherwise, separate the css:

div {
border-right:1px solid #333;
}

I suppose you could re-style <hr /> as an inline-block element, with specified height...

hr {
    display: inline-block;
    width: 2px;
    height: 256px;
}

That's just a basic example to get the <hr /> to look like I think you want it to look. You'd have to play with height and width (and possibly positioning) to make it do exactly what you need...