How to make <hr / "> tag vertically

Question

How to make a tag <hr />vertically, instead of the standard appearance as a horizontal line / side?

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

Answer 1

This will require changes more than just an hour. An item located above and below should be moved. the effect can be achieved using 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

css-. , , , , .

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

Answer 3

, div (<div></div>), css /. , , id <div id=""> class <div class="">

css, , :

#(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.) }

, / css, , ,

Answer 4

, <hr /> ...

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

This is just a basic example to make it <hr />look the way I think you want it to look. You will need to play with height and width (and possibly with positioning) to do exactly what you need ...

Answer 5

Put it in a div:

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

This is with inline css. Otherwise, separate css:

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