Vertical hr tag

Question

Is there anything like an hr tag, but in a vertical sense?

I don't want to use a table but basically I have two tabs and I want a line between the headers of the tabs.

Here's a quick jsfiddle of it.

Edit: New version of jsfiddle using border-right

Edit: Close enough! But if I put padding-top = 10 in friendsH and familyH instead of header, it works perfectly for some reason but then the things aren't centered vertically so I think i prefer it this way

This seems like a hack way to do it, but if it's the only way then i guess this is just the same question.

Either use border or, if the elements are a different height and you want it to match the tallest, I have a jQuery function I've written to do so. Let me know if you want it. — ClarkeyBoy, Jul 27 '12 at 19:32
would it work to reach down to the hr tag? Cuz in the updated jsfiddle i'm using the border and it doesn't quite make it. I explicitly set width and height of the box. — Tom Prats, Jul 27 '12 at 21:33
You'll likely need to fiddle with the padding, margin & height properties so that it covers the full height. — ClarkeyBoy, Jul 28 '12 at 06:07

score 3 · Answer 1 · answered Jul 27 '12 at 19:33

3

Yes you can. <hr style="display: inline" /> will result in a vertical rule.

(Fails in IE7, though, so you might want to conditional-comment a style to hide it or replace it with | instead)

answered Jul 27 '12 at 19:33

Niet the Dark Absol

320,036
81
464
592

_"replace it with `|`"_ ? can you elaborate on that? plz – Ram Jul 27 '12 at 19:50
this sort of worked but i couldn't get it to adjust to the height i needed – Tom Prats Jul 27 '12 at 21:36
Well, in my case, I like to put `|`, and then use a conditional-reveal comment ` ... ` to include a script that replaces `span.vr` with a "vertical rule"... So in other words I do it the other way around, to provide a better experience for old browser users. – Niet the Dark Absol Jul 27 '12 at 21:47

score 2 · Accepted Answer · answered Jul 27 '12 at 19:31

2

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

answered Jul 27 '12 at 19:31

Rishav Rastogi

15,484
3
42
47

it almost works but looks a little odd that it doesn't reach the hr line below it. Any idea how to fix that? I updated the fiddle – Tom Prats Jul 27 '12 at 21:31
may be use "border-bottom" instead of hr tag – Rishav Rastogi Jul 28 '12 at 05:07

score 0 · Answer 3 · answered Jul 27 '12 at 19:32

There isn't anything native to HTML. You can create something using CSS, using a very narror div for example with either a border on only one side, or an image background. If you're using jquery you may find a plugin to do it, but it would probably have more functionality such as allowing the user to drag and resize the divided areas.

score 0 · Answer 4 · answered Jul 27 '12 at 20:59

0

How about this:

http://jsfiddle.net/tprats108/r7rzt/14/

answered Jul 27 '12 at 20:59

Johndave Decano

2,101
2
16
16

score 0 · Answer 5 · answered Jan 22 '14 at 18:31

0

There is a trick that I picked up lately, that will make a vertical <hr>:

<hr width="1" size="500" style="display:inline-block;">

answered Jan 22 '14 at 18:31

Alex W

37,233
13
109
109

score 0 · Answer 6 · answered Sep 20 '15 at 12:35

0

There is no vertical hr tag, however you can use css to make a vertical hr

.vhr {
  width: 1px;
  height: 200px;

  }

<div class="v-hr"></div>

answered Sep 20 '15 at 12:35

alfalasi

11
4

Vertical hr tag

6 Answers6