Related
Recently I was looking through some website's code, and saw that every <div> had a class clearfix.
After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix?
Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?
If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.
It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.
display: inline-block - Better
Flexbox - Best (but limited browser support)
Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.
For a detailed browser list see: https://caniuse.com/flexbox.
(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)
A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix is a way to combat the zero-height container problem for floated elements
A clearfix is performed as follows:
.clearfix::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don't require IE<8 support, the following is fine too:
.clearfix::after {
content: "";
display: table;
clear: both;
}
Normally you would need to do something as follows:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
With clearfix, you only need the following:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Read about it in this article - by Chris Coyer # CSS-Tricks
The other answers are correct. But I want to add that it is a relic of the time when people were first learning CSS, and abused float to do all their layout. float is meant to do stuff like float images next to long runs of text, but lots of people used it as their primary layout mechanism. Since it wasn't really meant for that, you need hacks like "clearfix" to make it work.
These days display: inline-block is a solid alternative (except for IE6 and IE7), although more modern browsers are coming with even more useful layout mechanisms under names like flexbox, grid layout, etc.
The clearfix allows a container to wrap its floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely.
There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.
If you want support for older browsers, it's best to use this clearfix :
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
In SCSS, you could use the following technique :
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
#extend %clearfix;
}
If you don't care about supporting older browsers, there's a shorter version :
.clearfix:after {
content:"";
display:table;
clear:both;
}
To offer an update on the situation on Q2 of 2017.
A new CSS3 display property is available in Firefox 53, Chrome 58 and Opera 45.
.clearfix {
display: flow-root;
}
Check the availability for any browser here: http://caniuse.com/#feat=flow-root
The element (with a display property set to flow-root) generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
Meaning that if you use a parent div containing one or several floating children, this property is going to ensure the parent encloses all of its children. Without any need for a clearfix hack. On any children, nor even a last dummy element (if you were using the clearfix variant with :before on the last children).
.container {
display: flow-root;
background-color: Gainsboro;
}
.item {
border: 1px solid Black;
float: left;
}
.item1 {
height: 120px;
width: 120px;
}
.item2 {
height: 80px;
width: 140px;
float: right;
}
.item3 {
height: 160px;
width: 110px;
}
<div class="container">
This container box encloses all of its floating children.
<div class="item item1">Floating box 1</div>
<div class="item item2">Floating box 2</div>
<div class="item item3">Floating box 3</div>
</div>
Simply put, clearfix is a hack.
It is one of those ugly things that we all just have to live with as it is really the only reasonable way of ensuring floated child elements don't overflow their parents. There are other layout schemes out there but floating is too commonplace in web design/development today to ignore the value of the clearfix hack.
I personally lean towards the Micro Clearfix solution (Nicolas Gallagher)
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
reference
A technique commonly used in CSS float-based layouts is assigning a handful of CSS properties to an element which you know will contain floating elements. The technique, which is commonly implemented using a class definition called clearfix, (usually) implements the following CSS behaviors:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
The purpose of these combined behaviors is to create a container :after the active element containing a single '.' marked as hidden which will clear all preexisting floats and effectively reset the the page for the next piece of content.
I tried out the accepted answer but I still had a problem with the content alignment. Adding a ":before" selector as shown below fixed the issue:
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
LESS above will compile to CSS below:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden; on the containing element. For example
.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}
<div class="parent">
<div class="segment-a">
Float left
</div>
<div class="segment-b">
Float right
</div>
</div>
Of course this can only be used in instances where you never wish the content to overflow.
What is Clearfix?
A way for an element to clear its child elements automatically without any additional markup.
Working with properties: CSS clearfix is used to fix the overflow elements from the desired element. This can be worked with 3 properties:
Overflow Property
Height Property
Float Property
This all 3 CSS properties are used for fixing the overflow elements.
Why ClearFix?
To avoid adding unnecessary markup, an element can automatically clear or fix its elements using a clearfix.
It is employed in float layouts where elements are floated to form a horizontal stack.
When Clearfix?
When two or more floating items are placed next to one another.
When items are positioned in this fashion, the parent container has a height of 0, which can easily mess up a layout. The problem is inconsistent among browsers, which makes matters more difficult. To address all of that, the clearfix was created.
Like this:
Example(for your understanding):
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
Output of above code:
Is Clearfix becoming obselete?
Almost 15 years after it was first proposed and with the updates in 2007 and 2013, today the clearfix is losing relevance because today CSS Grid and Flexbox are filling in the gaps for advanced layout on the web.
Hope it helps.
Here is a different method same thing but a little different
the difference is the content dot which is replaced with a \00A0 == whitespace
More on this http://www.jqui.net/tips-tricks/css-clearfix/
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
Here is a compact version of it...
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
I'm not sure if the title uses accurate terminology; HTML is not my strong point. I'm trying to create a WordPress page and avoid using a table to accomplish what I want. I have several sections, each with an associated image. The text is flowing around the right-aligned image. I want each "section" to start on it's own line, or to NOT flow around the image from the previous section. If I were doing this with a table I would have a single column with a row for each "section" I wanted. Like I said, I don't want to use a table.
A picture is worth 1k words, so here we go. This is what I want:
and this is what I do not want (but what I'm getting just using < p > and < h2 > tags):
I'd like to know if there is a technique that will allow me to force the "Section 2" tag to start below the image for section 1? I added the green dashed line to illustrate where I would like to have the new section start.
Create a wrapper element, float your p as well as img element to the left like
Demo
.wrap {
width: 800px;
}
.wrap p {
float: left;
width: 500px;
}
.wrap img {
float: left;
width: 200px;
border: 1px solid #f00;
}
Now your .wrap element contains floating child elements so you need to clear them, so either use overflow: hidden; on the parent element which is .wrap here, else use the snippet below to self clear parent
.clear:after {
clear: both;
display: table;
content: "";
}
Why Clear Floats?
In this example am using background-color for .wrap but I don't see any color there, it's simply because the container element has no idea about the dimensions of floated elements, inorder to fix that, we clear the floats like this
You can refer this or this answer of mine which is related to the topic.
What is the issue, the issue might be because, you are having all of the content wrapped in one div, and you are just writing it all in that one div like this:
<div>
<div class="content_one">
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file.png" alt="photo" />
// and the second one starts just under that!
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file2.png" alt="photo" />
</div>
</div>
This will cause whole of the body to be alike, and there will be almost no barrier to control the style of the elements. If only you start it like this, it would create a distance! Also to make them fix inside a div, using clearfix is also a solution. But margins would be good if you try to get the divs seperately. Suppose:
Solution:
<div>
<div class="content_one">
<div class="each_content">
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file.png" alt="photo" />
</div>
// and the second one starts just under that!
<div class="each_content">
<span style="float: left;">Some Text</span>
<img style="float: right" src="~/folder/file2.png" alt="photo" />
</div>
</div>
</div>
Now, for this you would try to set margin:
.each_content {
margin: 5px;
}
It will set a margin, to the divs for 5px. You can also try to use a border, to make sure and also it would be helpfull for you to check where the divs start and where they end.
.each_content {
margin: 5px;
border: 4px dashed green;
}
I hope it helps you out.
After trying the various suggestions presented here I'm unable to use any of them because wordpress strips out HTML tags like so creating a container isn't supported.
I'm using tables.
Ah, the evolved web...
Use a clearfix class on each new section.
From Gallagher's post:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
I have a layout issue where the internal div "data" seems to be popping out of its containing div and showing outside. I've placed coloured borders around the bottom picture and the problem I'm having is the yellow text should be in the white box, but it's not. Anyone know what the issue is here I'm currently stumped. I've tried using clear:both but it didn't seem to work.
.whiteContainer
{
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
}
#display
{
border: 1px dotted green;
margin:3%;
}
.header
{
border: 1px dotted blue;
float:left;
}
.data
{
border: 1px dotted yellow;
float:right;
}
HTML portion:
<div class="whiteContainer">
<div id="display">
<div class='header'>Program Name: </div>
<br />
<div class='data'>
Strategic Project Grants
</div>
</div>
</div>
EDIT:
removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can't specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.
Set the parent container of the data (id=display) to "overflow:hidden" or "overflow:auto". It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks - All About Floats, there is a section about clearing floats.
The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container
http://www.webtoolkit.info/css-clearfix.html
or add a clearing element after your floating elements if you don't mind the extra markup.
<br style="clear:both" />
after your data div.
then if either wraps, the container will stretch to suit the content.
Get rid of the <br /> tag in your code.
You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:
.whiteContainer {
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
height:50px;
}
#display {
overflow:auto;
border: 1px dotted green;
margin:4px;
}
.header {
border: 1px dotted blue;
float:left;
}
.data {
border: 1px dotted yellow;
float:right;
}
jsFiddle example.
Remove the <br>
http://jsfiddle.net/SgEMc/
remove the "br" betwen your floated elements and add overflow: hidden; to #display.
see this:
http://jsfiddle.net/HOLYCOWBATMAN/updZW/
Recently I was looking through some website's code, and saw that every <div> had a class clearfix.
After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix?
Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?
If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.
It's worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.
display: inline-block - Better
Flexbox - Best (but limited browser support)
Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.
For a detailed browser list see: https://caniuse.com/flexbox.
(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)
A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
The clearfix is a way to combat the zero-height container problem for floated elements
A clearfix is performed as follows:
.clearfix::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don't require IE<8 support, the following is fine too:
.clearfix::after {
content: "";
display: table;
clear: both;
}
Normally you would need to do something as follows:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
With clearfix, you only need the following:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Read about it in this article - by Chris Coyer # CSS-Tricks
The other answers are correct. But I want to add that it is a relic of the time when people were first learning CSS, and abused float to do all their layout. float is meant to do stuff like float images next to long runs of text, but lots of people used it as their primary layout mechanism. Since it wasn't really meant for that, you need hacks like "clearfix" to make it work.
These days display: inline-block is a solid alternative (except for IE6 and IE7), although more modern browsers are coming with even more useful layout mechanisms under names like flexbox, grid layout, etc.
The clearfix allows a container to wrap its floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely.
There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.
If you want support for older browsers, it's best to use this clearfix :
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
In SCSS, you could use the following technique :
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
#extend %clearfix;
}
If you don't care about supporting older browsers, there's a shorter version :
.clearfix:after {
content:"";
display:table;
clear:both;
}
To offer an update on the situation on Q2 of 2017.
A new CSS3 display property is available in Firefox 53, Chrome 58 and Opera 45.
.clearfix {
display: flow-root;
}
Check the availability for any browser here: http://caniuse.com/#feat=flow-root
The element (with a display property set to flow-root) generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
Meaning that if you use a parent div containing one or several floating children, this property is going to ensure the parent encloses all of its children. Without any need for a clearfix hack. On any children, nor even a last dummy element (if you were using the clearfix variant with :before on the last children).
.container {
display: flow-root;
background-color: Gainsboro;
}
.item {
border: 1px solid Black;
float: left;
}
.item1 {
height: 120px;
width: 120px;
}
.item2 {
height: 80px;
width: 140px;
float: right;
}
.item3 {
height: 160px;
width: 110px;
}
<div class="container">
This container box encloses all of its floating children.
<div class="item item1">Floating box 1</div>
<div class="item item2">Floating box 2</div>
<div class="item item3">Floating box 3</div>
</div>
Simply put, clearfix is a hack.
It is one of those ugly things that we all just have to live with as it is really the only reasonable way of ensuring floated child elements don't overflow their parents. There are other layout schemes out there but floating is too commonplace in web design/development today to ignore the value of the clearfix hack.
I personally lean towards the Micro Clearfix solution (Nicolas Gallagher)
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
reference
A technique commonly used in CSS float-based layouts is assigning a handful of CSS properties to an element which you know will contain floating elements. The technique, which is commonly implemented using a class definition called clearfix, (usually) implements the following CSS behaviors:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
The purpose of these combined behaviors is to create a container :after the active element containing a single '.' marked as hidden which will clear all preexisting floats and effectively reset the the page for the next piece of content.
I tried out the accepted answer but I still had a problem with the content alignment. Adding a ":before" selector as shown below fixed the issue:
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
LESS above will compile to CSS below:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden; on the containing element. For example
.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}
<div class="parent">
<div class="segment-a">
Float left
</div>
<div class="segment-b">
Float right
</div>
</div>
Of course this can only be used in instances where you never wish the content to overflow.
What is Clearfix?
A way for an element to clear its child elements automatically without any additional markup.
Working with properties: CSS clearfix is used to fix the overflow elements from the desired element. This can be worked with 3 properties:
Overflow Property
Height Property
Float Property
This all 3 CSS properties are used for fixing the overflow elements.
Why ClearFix?
To avoid adding unnecessary markup, an element can automatically clear or fix its elements using a clearfix.
It is employed in float layouts where elements are floated to form a horizontal stack.
When Clearfix?
When two or more floating items are placed next to one another.
When items are positioned in this fashion, the parent container has a height of 0, which can easily mess up a layout. The problem is inconsistent among browsers, which makes matters more difficult. To address all of that, the clearfix was created.
Like this:
Example(for your understanding):
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
Output of above code:
Is Clearfix becoming obselete?
Almost 15 years after it was first proposed and with the updates in 2007 and 2013, today the clearfix is losing relevance because today CSS Grid and Flexbox are filling in the gaps for advanced layout on the web.
Hope it helps.
Here is a different method same thing but a little different
the difference is the content dot which is replaced with a \00A0 == whitespace
More on this http://www.jqui.net/tips-tricks/css-clearfix/
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
Here is a compact version of it...
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
How do you make a vertical line using 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>
You can use the horizontal rule tag to create vertical lines.
<hr width="1" size="500" style="0 auto" />
By using minimal width and large size, horizontal rule becomes a vertical one.
You can use an empty <div> that is styled exactly like you want the line to appear:
HTML:
<div class="vertical-line"></div>
With exact height (overriding style in-line):
div.vertical-line{
width: 1px; /* Line width */
background-color: black; /* Line color */
height: 100%; /* Override in-line if you want specific height. */
float: left; /* Causes the line to float to left of content.
You can instead use position:absolute or display:inline-block
if this fits better with your design */
}
<div class="vertical-line" style="height: 45px;"></div>
Style the border if you want 3D look:
div.vertical-line{
width: 0px; /* Use only border style */
height: 100%;
float: left;
border: 1px inset; /* This is default border style for <hr> tag */
}
<div class="vertical-line" style="height: 45px;"></div>
You can of course also experiment with advanced combinations:
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 2px;
}
<div class="vertical-line" style="height: 45px;"></div>
You can also make a vertical line using HTML horizontal line <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}
<hr class="vertical" />
There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:
#your_col {
border-left: 1px solid black;
}
<div id="your_col">
Your content here
</div>
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.
One other option is to use a 1-pixel image, and set the height - this option would allow you to float it to where you need to be.
Not the most elegant solution though.
You can draw a vertical line by simply using height / width with any html element.
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}
<div id="verticle-line"></div>
There is a <hr> tag for horizontal line. It can be used with CSS to make horizontal line also:
.divider{
margin-left: 5px;
margin-right: 5px;
height: 100px;
width: 1px;
background-color: red;
}
<hr class="divider">
The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.
There isn't any tag to create a vertical line in HTML.
Method: You load a line image. Then you set its style like "height: 100px ; width: 2px"
Method: You can use <td> tags <td style="border-left: 1px solid red; padding: 5px;"> X </td>
To create a vertical line centered inside a div I think you can use this code.
The 'container' may well be 100% width, I guess.
div.container {
width: 400px;
}
div.vertical-line {
border-left: 1px solid #808080;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
<div class="container">
<div class="vertical-line"> </div>
</div>
Rotate a <hr> 90 degrees:
<hr style="width:100px; transform:rotate(90deg);">
You can use hr (horizontal line) tag and than rotate it 90 degree with css below
hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
One more approach is possible : Using SVG.
eg :
<svg height="210" width="500">
<line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
Pros :
You can have line of any length and orientation.
You can specify the width, color easily
Cons :
SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don't support it.
I used a combination of the "hr" code suggested, and here's what my code looks like:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
I simply changed the value of the "left" pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)
Vertical line right to the div
<div style="width:50%">
<div style="border-right:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Vertical line left to the div
<div style="width:50%">
<div style="border-left:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Why not use |, which is the html special character for |
If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.
> is a child selector. It matches any child of the element(s) specified on the left.
* is a universal selector. It matches an element of any type.
:not(:first-child) means it's not the first child of its parent.
Browser support: > * :first-child and :not()
I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.
Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.
To add a vertical line you need to style an hr.
Now when you make a vertical line it will appear in the middle of the page:
<hr style="width:0.5px;height:500px;"/>
Now to put it where you want you can use this code:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
This will position it to the left, you can inverse it to position it to the right.
In the Previous element after which you want to apply the vertical row , You can set CSS ...
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
Simply use either of the UTF-8 Miscellaneous Symbols
|
|
That's all you need and its compatible with all browsers.
Thanks me later.
For an inline style I used this code:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
and that positioned it directly in the center.
I needed an inline vertical line, so I tricked a button into becoming a line.
<button type="button" class="v_line">l</button>
.v_line {
width: 0px;
padding: .5em .5px;
background-color: black;
margin: 0px; 4px;
}
I think it is a simple way not do to anything more You can change border left or right according to your need
.vertical-line{
border-left:1px solid #000
}
<span class="vertical-line"></span
You can also use the HTML symbol | which renders as '|'
To make the vertical line to center in the middle use:
position: absolute;
left: 50%;