How do I make a <hr /> tag go vertically
css, html, javascript
Solution
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
Problem
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.