I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap
I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;
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.
What is the difference
<br style="clear:both;"/>
vs
<div style="clear:both;"/>
??
Also, I thought
<div style="clear:both;"/>
is a good way of clearing, but is
<div style="clear:both;"> </div>
a proper way?
The difference is which other style attributes you inherit. Of course one inherits from <br> and the other from <div>.
Typically <div> has no special style implications other than display:block whereas <br> implies a line-break and some non-zero height (linked to the current font height).
But often (e.g. with the ubiquitous css-reset technique) there is approximentally no difference. Therefore, pick the one that makes the most semantic sense.
[UPDATE]
For closing tags, use <div></div> and not <div/>. Here's why.
Thanks to commentors Sebastian Celis and ephemient for the "closing tag" correction.
This is the style that I use for clearing:
.Clear { clear: both; height: 0; overflow: hidden; }
Usage:
<div class="Clear"></div>
This will not take up any extra space in the page as the height is zero.
Internet Explorer has a strange idea that the content of each element has to be at least one character high, and another strange idea that each element should be as high as it's content. Using overflow: hidden keeps the content from affecting the size of the element.
I would use:
<p class="clear"></p>
and in your CSS just add:
.clear {clear:both; height:0px; font-size:1px;}
/* font-size:0px; does not work well on IE7, it works in IE8 and all other browsers. */
You might say, why not:
<br class="clear">
I typically use the clear class after float:left elements, and when using the <br> instead of the <p> they don't seem to work well on IE7 they don't clear as supposed, and on Safari4/Chrome they add unwanted space. I didn't have time to investigtae better this one, so it might be just an error on my design, all I know the <p> in this case seem to be more cross-browser.
Well, there is no difference, depending on inherited styles.
This links says some more, and recommends :
http://www.positioniseverything.net/easyclearing.html
The only difference that I can think of here is that <div> is a block-level element, while <br> is an inline-level element.
But <br> actually behaves somewhat like a block-level element, other than the fact that it is effected by line-height and font-size CSS properties.
In my opinion, <br style="clear:both;"/> is the more proper way to put a line-break in your page, mostly because it is widely-accepted and easily identifiable by others who may not be familiar with your markup.
This is what I always use:
<style type="text/css">
.clearing {
height: 0;
line-height: 0;
font-size: 0;
clear: both;
overflow:hidden;
}
</style>
And where I need a clearing:
<div class="clearing"></div>
You may also be interested in self-clearing containers: http://www.positioniseverything.net/easyclearing.html
EDIT: Added "overflow:hidden" per the suggestion from another answer poster.
You do need to be careful about the / on the tag.
I had problems with the slash on the <script> tag terminated by <script language="javascript" src="MyScripts.js" /> way. Although, most xml compliant parsers would accept both.
<script> has to be terminated by </script>
.clear { clear: both; font-size: 0px; line-height: 0px; height: 0px; overflow:hidden; }
Usage
"br" sometimes has side-effects in Opera and IE browsers, so you should avoid using it
If you're writing (valid) XHTML you don't need to use the closing tag, but self closing div tags don't work in all browsers, so you should still use it. ie your example:
`<div style="clear:both;"> </div>`
This is valid XHTML (see html vs xhtml) but doesn't work in all browsers, so you should stick with the above:
<div style="clear:both;" />
also, For what it's worth the <br> tag is deprecated in favor of the <line> tag (see w3.org entry on the <br/> tag)
All methods are bad. Use CSS to change the appearance of your page. There are many methods to accomplish the same with CSS. Such as giving "overflow: hidden;" on the parent element.
<br /> is an inline element, where as <div> is a block element. Anyway, I personally prefer to use <hr class="clear">, I feel it is more semantically adequate.
You could also use..
with added CSS rules it can do the job, and it serves this purpose.