I am creating a calendar that contains tasks/events. When I add more events to the table row, I expect the row to re-size automatically to fit the contents but it is not. Instead, the contents spill out of the row.
If I remove my "events-wrapper" div, I can fix this problem but I need to wrap my events in this div so I can position them in the row so they do not overlap the date as more is added.
Here is the code below.
HTML
<tr class="week">
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22</div></td>
<td>
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr>
CSS
.week td{
text-align: right;
position: relative;
font-size: 14px;
padding: 2px 5px;
width: 14.28%;
}
.week .date{
position: absolute;
top: 4px;
right: 5px;
}
.events-wrapper{
position:absolute;
top:20px;
}
.event{
width: 95%;
height: 20px;
border: 1px solid blue;
background-color: lightblue;
display: inline-block;
top: 5px;
position:relative;
margin-bottom: 5px;
padding-left: 5px;
text-align: left;
}
.event .event-name{
display:inline;
font-weight:bold;
}
Any suggestions on how to fix this?
If I got you. You used position absolute to you code so the elemnt don't get any size. your td item cant get size for 2 absolute divs within hi,
so i cahnges the code and give you on fiddle:
https://jsfiddle.net/1tt63h85/
changes:
.event{
position: static;
}
.week .date{
position: static;
}
Welcome to StackOverflow!
The Main Deal: Don't do this.
There's quite a few foundational issues with what is going on here. Right off the bat, I'd strongly recommend having something that can easily have data written in with ease. Editing markup will be a terrible way of adding data to the calendar, and many unexpected/undesirable results may occur.
At any rate, I was compelled to spend a couple minutes and crack out something that I think would show you what you're trying to work towards. I made two examples for you: a simple calendar that has the dates running vertically (my assumption for what your goal was from the example) and another, much more robust calendar (Guy Ytzhak previously answered and assumed you were looking to have the dates run horizontally across the screen)
Neither calendar is complete in any way; they are simply working examples (that I've styled horribly) to show you how I'd structure such a frail system, if I was forced to go about it the way you currently are.
http://codepen.io/anon/pen/ZObOaR - Simple Vertical Date Example
http://codepen.io/anon/pen/oLjLoK - Robust Horizontal Date Example
Some Problems
Your original issue for layout and placement really came from the structure of your table. Your attempts at corrective styling have also further muddled up the issue:
<tr class="week"> <!-- This is a row -->
<td><div class="date">20</div></td> <!-- (1st 'td') First Item in the row -->
<td><div class="date">21</div></td> <!-- (2nd 'td') Sits to the right of the 1st 'td'-->
<td><div class="date">22</div></td> <!-- (3rd 'td') Sits to the right of the 2nd 'td' -->
<td> <!-- (4th 'td') Sits to the right of the 3rd item -->
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr> <!-- (Still the 4th 'td') Sits to the right of the 3rd item -->
The core table structural issue is shown above. (Assuming no additional code affects the placement & layout beyond what you've provided)
What's Supposed To Happen:
The way a table works (in a very crude & basic sense with a focus on <table>, <tr>, and <td> without worrying about the other pieces) is that it:
Establishes a... well, a table. (<table> tag) - Think of this like a containing box.
Establishes a row (<tr> tag) within said table.
Establishes any number of table cells (<td> tag) within said row.
Repeat steps 2 and 3 until no more <tr> and <td> tags are left
That's how it's supposed to work (mostly). Your code, however, attempts to force a row (<tr>) tag to display its contained cells (<td>) tags in a column, not a row, and I've seen you've tried to do this through absolute positioning. Not a good thing to do.
Some More Problems
Additionally, if you were to throw this into a codepen and inspect it (right click the the table you've created and click inspect), you'll find that the <td> tags and <tr> tags have been stripped away in the rendered result, which is why your below styling does not get applied:
.week td{
text-align: right;
position: relative;
font-size: 14px;
padding: 2px 5px;
width: 14.28%;
}
If you're confused and would like to verify this, feel free to click the following link. I've taken the liberty of throwing your original code into this codepen:
http://codepen.io/anon/pen/WxQXZO
Even More Problems (30% bonus issues completely FREE!)
Your table tags being stripped (along with everything I've said previously) aren't the only core issue. In fact, you'll find that it still has plenty of issues if you were to throw the entirety of your HTML into a set of table tags so it looks like the below code block:
<table>
<tr class="week">
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22</div></td>
<td>
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr>
</table>
This is why I've decided to make you two completely new examples. However, they're also very issue-riddled. I probably could have done them a bit better, but I'm doing this purely for example purposes.
The point is:
Could you make a calendar like this? Yes. You could probably make it work pretty well if you worked at it. With that said, I feel that HTML and CSS alone aren't fit to provide this solution with any form of reliability, especially if you want this thing to be interactive on the web. You'd need to take advantage of some javascript libraries, like jQuery, give you the functionality you need. Even then, however, maintaining this thing with new events, dates, etc. would be a total pain and take a lot of time for each edit.
Calendars are meant to quickly and easily provide a visual display of schedule data that can be changed/updated on the fly with ease. This does not do any of that.... and we're not even discussing browser support/device compatibility yet.
My Recommendation:
Grab a CMS (if you don't already use one) like Wordpress or Drupal and develop on there. You can easily download a plethora of beautiful calendars that work wonderfully (and some that don't work so well). A CMS would save you time, frustration, and you'll be able to create something better in the end.
Hope this helps and welcome to StackOverflow! :)
I have a paragraph, which is text-align:justify. But due to some words the difference between words increase so much. There was a property text-justify:newspaper; which breaks the words to make them relevantly spaced. But it is not supported by any browser except IE. Is there any alternative for this property.
Or what is the best way to justify them.
Fiddle Here
In your case, the best way would be to keep text-align:left; by applying a fixed width (either in percentage or pixels) to achieve what you are looking for.
For Instance,
element.style {
text-align: left;
width: 220px;
}
Fiddle Demo
Hope this helps.
PS: width: 220px; is an illustrative value. You can change it as per your scenario.
HTML :
<div class="pad1" style="width:190px;">
<h2 class="center">Why are</h2>
<p style="word-spacing: 2px;">Our work process includes the smooth communication between the client and the execution team As soon as we receive a project <b>request, it is</b> immediately registered in the system and a project code is assigned to it. </p>
<div class="wrapper center">
<a class="button" href="users/About#why"><span><span><font style="margin-top:1px;"><cufon class="cufon cufon-canvas" alt="More" style="width: 51px; height: 20px;"><canvas width="63" height="25" style="width: 63px; height: 25px; top: -3px; left: -1px;"></canvas><cufontext>More</cufontext></cufon></font></span></span></a>
</div>
</div>
I thik u can use only word-spacing: 2px; instead of text-align: justify; text-justify: newspaper;
The text-justify: newspaper setting does not break words; instead, it adds spacing between letters of a word when justification is needed. Browsers that do not support it (all but IE) do not provide any way to affect the justification process: justification causes spacing between words to be added, and that’s it.
However, you can usually get much better justified text if you make browsers hyphenate words. This reduces the need for added spacing. There are several ways to do hyphenation, but nowadays the approach that works most widely is JavaScript-based hyphenation client-side, using e.g. Hyphenator.js.
I really need help converting this simple table structure to css div's. Is there a simple application or something. CSS divs are driving me insane.
<table width="100%" border="0">
<tr>
<td colspan="3" id="Header"></td>
</tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
</tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>
Test this:
EDIT: http://jsfiddle.net/DCbgg/
<style type="text/css" media="screen">
.container {
width: 100%;
}
.left20 {
width: 20%;
float: left;
background: red;
}
.left40 {
width: 40%;
float: left;
background: green;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="left20">
Left
</div>
<div class="left20">
Left
</div>
<div class="left40">
Left
</div>
<div class="clear"></div>
<div class="left20">
Left
</div>
<div class="left20">
Left
</div>
<div class="left40">
Left
</div>
</div>
<div class="clear"></div>
First Things First
There are some very important things to remember when changing from table to div layouts that generally apply to all new learning experiences.
Don't get frustrated just because something's not working. Just take a break, look at something else, remember that it's something new and it won't always work the first time. It may take a number of different approaches and attempts before it finally works. You'll get the hang of it eventually.
Especially in this case, remember that divs are vastly different from tables, especially when using them as a major structural part of a site. The thought process behind each is completely different and can take a lot of getting used to for it to click. Because of this:
Not all designs transfer from table to div. Some things are only really easily and properly accomplished with tables, and others with divs. While this is not one of those cases in particular, be open to having to make some design changes when changing your site structure.
That being said, we can now answer the question properly.
An Answer
This is how I would set up the structure using divs:
<div id="wrap">
<div id="header"></div>
<div id="content">
<div id="nav2"></div>
<div id="content_right"></div>
<div style="clear: both"></div>
</div>
<div id="footer"></div>
</div>
And this is what the css would be:
#wrap {
width: 100%;
}
#header {
width: 100%;
height: /* some height value */;
}
#content {
width: 100%;
height: /* some height value */;
}
#nav2 {
width: 20%;
float: left;
}
#content_right {
width: 40%;
float: right;
}
#footer {
width: 100%;
height: /* some height value */;
}
Notes
As I was saying above, the thought process behind tables and divs are quite a bit different. With tables, you're used to using percentages (%) to define widths. This works and is not necessarily a bad thing. It gets the job done and is easy to do.
But when you're using divs, a more common approach is to have fixed widths defined by pixels (px). This allows for a more constant design that won't stretch across the page, and gives you more design freedom, knowing that the page will always be the same width.
For more information on fixed-width design, I would recommend looking at the 960 grid system. It is extremely easy to follow and leads to clean, good-looking designs that are easy to structure and style.
Most importantly, enjoy the new-found freedom that divs bring. They aren't locked in to anything and can literal do anything, be anywhere, and look like anything on a page. There isn't really a limit to what they can do. I've heard them called the only required part of a webpage (You really can design and create an enter page with just divs, text included).
Have fun on your journey!
CSS3 Style (using "display:table;"):
Check http://jsfiddle.net/reKfe/ (jsFiddle made from http://query7.com/exploring-the-power-of-css3)
I have some html which looks like this:
<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>
in IE.8 this is shown as
fig vitamin
apple vitamin
coconut vitamin
and all of the 'vitamins' are nicely aligned.
in Chrome the gap is not created and therefore it is not nicely rendered.
figvitamin
applevitamin
coconutvitamin
The question is:
is this a problem/bug with Chrome or is it because the html is not correct and ie8 (in this case) just guesses better my intentions ?
Chrome and Firefox are correct. Width is not a valid style property for inline elements. You have several options:
Inline Blocks
You can do this:
<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin
with:
span { display: inline-block; width: 80px; }
You'll notice I used <span> instead of <div>. There is a reason for this. <span>s are naturally display: inline and according to Quirksmode:
In IE 6 and 7 inline-block works
only on elements that have a natural
display: inline.
Firefox 2 and lower don't support this
value. You can use -moz-inline-box,
but be aware that it's not the same as
inline-block, and it may not work as
you expect in some situations.
Floats
You can float the left labels:
<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin
with:
div { float: left; clear: left; width: 80px; }
If the text after the <div> is sufficiently large it will wrap to the beginning of the line (not with the 80px buffer). You might want that or not.
Definition List
Using this markup:
<dl>
<dt>fig</dt><dd>vitamin</dd>
<dt>apple</dt><dd>vitamin</dd>
<dt>coconut</dt><dd>vitamin</dd>
</dl>
with:
dt { float: left; width: 80px; }
Tables
<table>
<tbody>
<tr>
<td class="left">fig</td>
<td>vitamin</td>
</tr>
<td>apple</td>
<td>vitamin</td>
</tr>
<td>coconut</td>
<td>vitamin</td>
</tr>
</tbody>
</table>
with:
table { border-collapse: collapse; }
td.left { width: 80px; }
Tables will be by far the most backward compatible solution (going back to IE5 or earlier) so they're still often used in situations where some might argue they aren't appropriate. The ideals of the so-called semantic Web are well-intentioned and worth adhering to where possible but you'll also often end up in situations where you're choosing between "semantic purity" and backwards compatibility so a certain amount of pragmatism needs to prevail.
That being said, unless you're not telling us something, you shouldn't need to go this path if you don't want to.
Lastly, always put a DOCTYPE declaration on your pages. It forces IE from quirks mode to standards compliant mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
You could use a div that is floated to the left for the headings - this is popular for two column forms and the like on websites that don't want to use tables, or need more flexibility that the strict layout that a table restricts you to.
<div class="wrapper">
<div style="float: left; width: 80px;">Banana</div>
<div>Vitamin Awesome</div>
</div>
I guess the outer div could be replaced with a <br clear="both" /> afterwards.
I know there is a hr (horizontal rule) in html, but I don't believe there is a vr (vertical rule). Am I wrong and if not, why isn't there a vertical rule?
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.
You can make a vertical rule like this: <hr style="width: 1px; height: 20px; display: inline-block;">
An <hr> inside a display:flex will make it display vertically.
JSFiddle: https://jsfiddle.net/w6y5t1kL/
Example:
<div style="display:flex;">
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
<hr>
<div>
Content
<ul>
<li>Continued content...</li>
</ul>
</div>
</div>
As pointed out by others, the concept of a vertical rule does not fit in with the original ideas behind the structure and presentation of HTML documents. However, these days (especially with the proliferation of web-apps) there are is a small number of scenarios where this would indeed be useful.
For example, consider a horizontal navigation menu fixed at the top of the screen, similar to the menu-bar in most windowed GUI applications. You have several top-level menu items arranged from left-to-right which when clicked open up drop-down menus. Years ago, it was common practice to create this with a single-row table, but this is bad HTML and it is widely recognised that the correct way to go would be a list with heavily customised CSS.
Now, say you want to group similar items, but add a vertical separator in between groups, to achieve something like this:
[Item 1a] [Item 1b] | [Item 2a] [Item 2b]
Using <hr style="width: 1px; height: 100%; ..." /> works, but may be considered semantically incorrect as you are changing what that element is actually for. Furthermore, you can't use this within certain elements where the HTML DTD allows only inline-level elements (e.g. within a <span> element).
A better option would be <span style="display: inline-block; width:1px; height:100%; background:#000; margin: 0 2px;"></span>, however not all browsers support the display: inline-block; CSS property, so the only real inline-level option is to use an image like so:
<img src="pixel.gif" alt="|" style="width:1px; height:100%; background:#000; margin: 0 2px;" />
This has the added advantage of being compatible with text-only browsers (like lynx) as the pipe character is displayed instead of the image. (It still annoys me that M$IE incorrectly uses alt text as a tooltip; that's what the title attribute is for!)
<style type="text/css">
.vr
{
display:inline;
height:100%;
width:1px;
border:1px inset;
margin:5px
}
</style>
<div style="font-size:50px">Vertical Rule: →<div class="vr"></div>←</div>
Try it out.
How about:
writing-mode:tb-rl
Where top->bottom, right->left?
We will need vertical rule for this.
I know I am adding my answer very late, but it would be worth I am sure. You can achieve vertical line using flex and hr
See my codepen here.
There isn't, where would it go?
Use CSS to put a border-right on an element if you want something like that.
Ancient question but I solved this with display:flex; and it works great:
<div style="display:flex;border:1px dotted black;margin-bottom:20px;">
<div>
This is a div
</div>
<div style="border-left:1px solid black;margin:0 7.5px;"></div>
<div>
This is another div
</div>
</div>
https://jsfiddle.net/6qfd59vm/3/
This solution also doesn't require fixed height.
Try this.
You can set height and width on "div", like the scope for "hr".
The margin of "hr" is used to alignment.
<div style="display: inline-flex; width: 25px; height: 100px;">
<hr style="margin: 0px 0px 0px 12.5px;">
</div>
HTML has little to no vertical positioning due to typographic nature of content layout. Vertical Rule just doesn't fit its semantics.
Try it and you will know yourself:
<body>
rokon<br />
rkn <hr style="width: 1px; height: 10px; display: inline; margin-left: 2px; margin-right: 2px;" />rockon<br />
rocks
</body>
</html>
you can do in 2 way :
create style as you already gave in div but change border-left to border-right
take a image and make its width 1-2 px
You can very easily do this by
hr{
transform: rotate(90deg);
}
<html>
<head>
</head>
<body>
<hr>
</body>
</html>
Be careful about the height and width of hr
In the context of a list item being used as navigation a <vr /> tag would be perfectly useful. The reason it does not exist is because "It does not make logical sense to have one" in the context of HTML a decade ago.
For use in HTML email for most desktop clients you have to use tables. In this case, you can use <hr> tag, with necessary (but simple) inline styling, like:
<hr width="1" size="50">
Of course that styling with CSS is more flexible, but GMail and similar don't allow using of any CSS styling other than inline...
You can use css for simulate a vertical line, and use the class on the div
.vhLine {
border-left: thick solid #000000;
}
You could create a custom tag as such:
<html>
<head>
<style>
vr {
display: inline-block;
// This is where you'd set the ruler color
background-color: black;
// This is where you'd set the ruler width
width: 2px;
//this is where you'd set the spacing between the ruler and surrounding text
margin: 0px 5px 0px 5px;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
this is text <vr></vr> more text
</body>
</html>
(If anyone knows a way that I could turn this into an "open-ended" tag, like <hr> let me know and I will edit it in)
There is no tag in HTML, but you can use |.
You could use the new HTML5 SVG tag:
<svg style="position:absolute;width:100%;height:100%;">
<line id="myVerticalLine" y1="0" y2="100" x1="0" x2="0">
</line>
</svg>
I find it easy to make an image of a line, and then insert it into the code as a "rule", setting the width and/or height as needed. These have all been horizontal-rule images, but there's nothing stopping me (or you) from using a "vertical-rule" image.
This is cool for many reasons; you can use different lines, colors, or patterns easily as "rules", and since they would have no text, even if you had done it the "normal" way using hr in HTML, it shouldn't impact SEO or other stuff like that. And the image file would/should be very tiny (1 or 2KB at most).
Too many overly-complicated answers. Just make a TableData tag that spans how many rows you want it to using rowspan. Then use the right-border for the actual bar.
Example:
<td rowspan="5" style="border-right-color: #000000; border-right-width: thin; border-right-style: solid"> </td>
<td rowspan="5"> </td>
Ensure that the " " in the second line runs the same amount of lines as the first. so that there's proper spacing between both.
This technique has served me rather well with my time in HTML5.
Today is possible with CSS3
hr {
background-color:black;
color:black;
-webkit-transform:rotate(90deg);
position:absolute;
width:100px;
height:2px;
left:100px;
}
For people who're trying to make columns for text, there's a column-rule property which you should consider using!
.content{
margin: 20px 5%;
padding: 5px;
}
.content p{
-webkit-column-count: 3;
-moz-column-count:3;
-o-column-count:3;
column-count: 3;
-webkit-column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
-o-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
text-align: justify;
}
<div class="content">
<p>
Lorizzle ipsum tellivizzle sit amizzle, consectetizzle adipiscing elit. Nullam away things, shizznit stuff, suscipizzle shiz, gravida vizzle, funky fresh. Doggy phat tortizzle. Check it out its fo rizzle. Bizzle izzle shizzle my nizzle crocodizzle dapibus turpizzle tempizzle i'm in the shizzle. Mauris gizzle nibh et ghetto. Vestibulum ass phat. Pellentesque eleifend nizzle nisi. Fo shizzle my shizz shiznit fo shizzle dizzle. Donec dapibus. That's the shizzle uhuh ... yih! urna, pretium eu, mattizzle cool, shit things, nunc. Fizzle suscipizzle. Shizzlin dizzle semper daahng dawg boofron bow wow wow.
</p>
</div>
<div style="width:1px;background-color:red;height:30px;float:right;"></div>
Easily can be done using a div like this
HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The - is mandatory in all custom elements.
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.
3. instantiate
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*Unfortunately you can't create custom self-closing tags.
usage
<h1>THIS<v-r></v-r>WORKS</h1>
example: http://html5.qry.me/vertical-rule
Don't want to mess with javascript?
Simply apply this CSS class to your designated element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
link to original answer on SO.
No there is not. And I will tell you a little story on why it is not. But first,
quick solutions:
a) Use CSS class for basic elements span/div, e.g.: <span class="vr"></span>:
.vr{
display: inline-block;
vertical-align: middle;
/* note that height must be precise, 100% does not work in some major browsers */
height: 100px;
width: 1px;
background-color: #000;
}
Demonstration of use => https://jsfiddle.net/fe3tasa0/
b) Make a use of a one-side-only border and possibly CSS :first-child selector if you want to apply a general dividers among sibling/neigbour elements.
The story about <vr> FITTING in the original paradigm,but still not being there:
Many answers here suggest, that vertical divider does not fit the original HTML paradigm/approach ... that is completely wrong. Also the answers contradict themselves a lot.
Those same people are probably calling their clear CSS class "clearfix" - there is nothing to fix about floating, you are just clearing it ... There was even an element in HTML3: <clear>. Sadly, this and clearance of floating is one of the few common misconceptions.
Anyway. "Back then" in the "original HTML ages", there was no thought about something like inline-block, there were just blocks, inlines and tables.
The last one is actually the reason why <vr> does not exist.
Back then it was assumed that:
If you want to verticaly divide something and/or make more blocks from left to right =>
=> you are making/want to make columns =>
=> that implies you are creating a table =>
=> tables have natural borders between their cells => no reason to make a <vr>
This approach is actually still valid, but as time showed, the syntax made for tables is not suitable for every case as well as it's default styles.
Another, probably later, assumption was that if you are not creating table, you are probably floating block elements. That meaning they are sticking together, and again, you can set a border, and those days probably even use the :first-child selector I suggested above...
There is not.
Why? Probably because a table with two columns will do.