Is There a Vr (Vertical Rule) in HTML

Is there a vr (vertical rule) in html?

No, there is no vertical rule.

EDIT: It's 2021 (twelve years after I answered this question), and I no longer think my original explanation is true:

(original explanation)

It does not make logical sense to have one. HTML is parsed
sequentially, meaning you lay out your HTML code from top to bottom,
left to right how you want it to appear from top to bottom, left to
right (generally)
A vr tag does not follow that paradigm.

I'm not sure why a VR tag was never introduced, but it's likely not because of the way HTML is parsed - there are many different layout modes in HTML/CSS now that do not follow this "paradigm".

If I were to now speculate as to why there is no VR tag, I might look at MDN's definition of the HR tag as a clue:

The HTML <hr> element represents a thematic break between
paragraph-level elements: for example, a change of scene in a story,
or a shift of topic within a section.

In practice, however, the <hr> tag often ends up used for things other than it's semantic meaning. Although it may seem based on it's real world use that there should be a <vr> tag, it probably would not resemble anything related to the semantic definition of the <hr> tag. It was probably never thought to be introduced.

My hunch is that the creators would suggest that the domain of the solution for this problem lies in CSS, not HTML (and most of the answers to this SO question reflect that).

Nixinova's solution looks like the most elegant and modern solution to this problem.

(The rest of my old answer follows below):

This is easy to do using CSS, however. Ex:

<div style="border-left:1px solid #000;height:500px"></div>

Note that you need to specify a height or fill the container with content.

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}

<div class="verticalLine">  some other content</div>

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

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

Vertical hr tag

There is no "Vertical" hr tag. You can use "border-left" and "border-right" css properties to get such an effect.

Vertical rule (as opposed to <hr>) in CSS

for this you basically need to setup a place to put it and a div statement works.

 <div style="width:150px;height:2px;background-color:#000000;"> </div>

this could also be referenced:

 .hr {width:150px;height:2px;background-color:#000000;} // in your css file/script

 <div class="hr"> </div> <!-- IN HTML -->

You can change the position and have it going up/down or left/right with css placement and z-index

 .hr {width:2px;height:150px;background-color:#000000;position:absolute;top:0px;left:50px;z-index:10;} // in your css file/script

---

basically

 width            = how wide you want it
 height           = how tall you want it
 background-color = is the color you want it to be
 position         = absolute, relative, float - basically if it stays in one place or moves with page content
 top              = where to place in reference to top of page - could be margin-top
 left             = where to place in reference to left of page - could be margin-left

hr elements vertically between buttons?

Not sure if this was the solution that you were looking for but I made a pen with the hr 'joining the two buttons'.

The easiest way is to use absolute positioning as that allows the buttons to be dynamic, like this:

hr {
position: absolute;
  width: 100%;
  top: 0;
  z-index: -1;
}

http://codepen.io/anon/pen/xGYEyE

Hope this solves your problem!

vertical divider between two columns in bootstrap

If your code looks like this:

<div class="row">
  <div class="span6">
  </div>
  <div class="span6">
  </div>
</div>

Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

So you could simply add some CSS to the "mycontent-left" class to create your divider.

.mycontent-left {
  border-right: 1px dashed #333;
}

How to place a vertical hr line beside two images in html

I replaced your hr with a div, and adjusted the widths of the images so that the div would fit.
Also the border solution didn't work here due to your percentage widths, which would get more than 100% size and push the second image down.

<html><head><style>
.img1 {    min-width: 100%;    }
 .bikeimg {    width: 49.9%;    height: 350px;    margin-top: -8px;    margin-left: 0px;    float: left; }
 .bike {    text-align: center; }
 .coins {    width: 49.9%;    height: 350px;    display:inline-block;    float: right;    margin-top: -8px; }
 .title {    text-align: center;    font-size: 80px;    font-family: 'Oswald', sans-serif;    margin-top: -320px;    text-decoration: underline; }
.vertical-hr { margin-top: -8px; width:0.2%; height: 350px; float:left;  background-color:black;}.hr_first {    margin-top: 200px;}
</style>
<body>
<img src="backgroundfirsttry.jpg" class="img1" height=483>
 <div class="title">Our Proposals</div>
 <hr size="30" color="black" class="hr_first">
 <img src="bikeimg.jpg" class="bikeimg">  <div class="vertical-hr"></div>
 <img src="recycling.jpg" class="coins">
 </body> </html>

---

Related Topics