HTML vertical line Separator

Question

I create a horizontal line separator like so:

/* line separator */
   .aSeparator {
    border-top:1px solid #5f656d;
    height:1px;
    margin:16px 0;
   }

<div class="aSeparator"></div>

View it here: https://jsfiddle.net/xjna71pn/

It's cool because it stays the length of the window minus the padding.

My question is, how can I create a vertical one?

I tried the obvious, border-left but it didn't seem to work.

`border-left` should work but your element is only 1px tall and that's the probably the reason you are thinking there is a problem. — Harry, Nov 26 '16 at 15:57
http://stackoverflow.com/questions/3148415/how-to-make-a-vertical-line-in-html — marmeladze, Nov 26 '16 at 16:04

score 4 · Answer 1 · answered Nov 27 '16 at 13:46

This is exactly what I implemented:

In HTML:

<div class="vertLine">
    /* Some content, you want to the left of the vertical line.*/
</div>

In CSS:

.vertLine {
    border-right:1px #ff0000;    /* line 1 pixel width, length of "Some content" */
}

Slightly different to what others suggested, but is the exact thing I was looking for.

You don't need to specify a height/length, as it'll just be the height of what ever content you place in-between it. eg. If you put a 100px image, the line will be to the right, 100px tall.

score 0 · Answer 2 · answered Nov 26 '16 at 16:02

0

It does work with border left, but you need to specify a higher height ( currently set to 1px).

answered Nov 26 '16 at 16:02

Mojo Allmighty

793
7
18

score 0 · Answer 3 · edited Nov 27 '16 at 04:39

You need to set a specific height. Your vertical separator css would be like this:

.aVerticalSeparator {
    border-left: 1px solid #5f656d; /* Border on the left */
    width: 1px; /* Width instead of height */
    height: 200px;
}

To make it occupy the entire height of its parent, you have to set its height to 100%, but the parent element must have an height.

Here's a demo with a simple html document, where the root elements (html and body) have a specific height set, so the separator can fill up to 100%.

pvrforpranavvr · Answer 4 · 2018-04-25T17:36:00.173

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>

HTML vertical line Separator

4 Answers4