How do I make a <hr /> tag go vertically

Question

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.

Answer 1

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

Answer 2

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);
}