How do I create a vertical line across my website?

Question

I want to create a line in my html/css to separate my navbar from the rest of the website, kind of like a border but only visible on the right side of the website.

But unlike a border I would like the line to go along the entire website. So from the top of the website to the bottom, what's the code for that?

Have in mind that I'm very new to both html and css so I am not familiar with canvas etc.

I did try a HTML and CSS from another thread but I couldn't make it work, it looked like this:

<div id="vLine">
    <h1>text</h1>
</pre>

#vLine {
    height: 100%;
    width: 50px;
    border-left: 3px solid black;
    border-right: 3px solid black;

Why wouldn't adding a border to your navbar column not be enough in that case? As to your problem, 100% height can be tricky, especially with IE (see http://stackoverflow.com/questions/16811716/height100-not-working-in-internet-explorer - if that's what you're searching for). You could read some tutorials about layouting in CSS, I think that might help you. For example, google gives me sources like http://learnlayout.com/ and http://css-tricks.com/downloads/layouts-templates/ (CSS tricks is usually a good source for that kind of stuff). — CunningFatalist, Dec 01 '14 at 08:11
@user3437460 The people that perform community moderation tasks aren't being nasty. The site loses its value as a resource when there are hundreds of duplicate questions with answers of varying quality. The community tries to locate the best and most complete answers, like the one you linked to, then close the duplicates against it. That way, when you search Google, you're more likely to find **the** answer. Don't take it personally, that's not a constructive way to approach the community. — Chris Baker, Dec 01 '14 at 08:16
@ChrisBaker I agree with what you said, but sometimes a question which is clearly not a dubplicate gets marked as duplicate within seconds after it is posted when it is not. Sometimes we just can't deny the community moderation works like a double edged sword. — user3437460, Dec 01 '14 at 08:20

score 0 · Answer 1 · answered Dec 01 '14 at 08:20

Html:

...
<div class="text-left">Some text on the left side...</div>
<div class="vline"></div>
<div class="text-right">Some text on the right side...</div>
...

Css:

html, body {height: 100%;}
.text-left, .text-right {
    width: 200px;
    float: left;
    padding: 10px;
}
.vline {
    float: left;
    height: 100%;
    width: 1px;
    background: #ccc;
}
.text-right:after { /* clearfix */
    display: block;
    content: "";
    clear: both;
}

JsFiddle: http://jsfiddle.net/v7ay7ub2/

Also, you can do it without `vline` element, just adding to the `text-left` element such styles: `border-right: 1px solid #ccc;` — Footniko, Dec 01 '14 at 08:24

score -1 · Answer 2 · answered Dec 01 '14 at 08:16

-1

first of all do not close div tag by pre, answering your question, you can create div or another tag with position fixed and place them where you want

answered Dec 01 '14 at 08:16

Smile0ff

788
7
18

How do I create a vertical line across my website?

2 Answers2