Adding a vertical line from the header border line to bottom in html and css

Question

The given css code gives the bottom border line to my header in html page. I want to add a similar vertical line which starts from the border line in header till bottom of the page such that I can get a sidebar panel from left. Please help me.

header {
  border-bottom: #bfa161 solid 3px;
  height: 60px;
  background-color: #fff;
  position: relative;
  z-index: 9999;
}

this only controls your header - but you could put at border-left on your main content holder — Stender, Aug 18 '17 at 10:49
you could also give your sidebar a border when it is implemented. — Stender, Aug 18 '17 at 10:51
.verticalLine { border-left: #bfa161 solid 3px; height: 602px; width: 5000 px; background-color: #fff; position: vertical; z-index: 9999; } — AK94, Aug 18 '17 at 11:03
The above script has given a border line to left of the screen, I want to give a space of 60 px from left of the screen, can you please help me with the attribute? — AK94, Aug 18 '17 at 11:04

Terry Dorsey · Answer 1 · 2017-08-18T11:42:32.520

Yeah, do what Hash said. You should have your site organized into wrappers and "sub" wrappers using the "div" tag. W3Schools has some really well written documentation on it. I strongly advise you read it. It's not very long. Just google it.

Here's a link explaining the basic concept if you aren't familiar. What is the correct way to do a CSS Wrapper?

You should make a div as the first thing inside your body tag, and the last thing before the closing tag. Assign an ID to that tag. Most people call that wrapper. Here's what the HTML would look like.

<body>
    <div id=wrapper>
 #content for your page
    </div>
</body>

Then when you do your CSS, add something like this. NOTEIt's a good idea to define a "max-width". You can actually customize different widths for different resolution ranges when you get comfortable doing more complicated things in CSS.

#wrappper{
    max-width: 900px;
    max-height: 1750px;
    border: #bfa161 solid 3px;
    margin: 0 auto;     <---"This is so the wrapper centers itself on your screen"
}

Now if you wanted to have a left navigation menu that didn't interfere with any of your page content, you could make two more div tags inside your wrapper div. Give one an id of something like navigationdiv and the other one contentdiv. Float the content div right and float the navigation div left. Obviously, you should place your nav in the navigationdiv and everything else in the contentdiv. Make sure you make both div tags inline-block. It never hurts to define a width either.

navigationdiv{
     display: inline-block;
     width: 200px;
     border-right: #bfa161 solid 3px;    <---"This will make the line you wanted"
     float: left;
}

contentdiv{
     display: inline-block;
     max-width: 700px;
     float: right;
}

I hope this was clear and thorough.

Hash · Accepted Answer · 2017-08-18T11:55:29.457

0

Simple as this, you just need to give a border color to the div. You can size the div to match the requirement.

header {
  border-bottom: #bfa161 solid 3px;
  height: 60px;
  background-color: #fff;
  position: relative;
  z-index: 9999;
}

footer {
  border-top: #bfa161 solid 3px;
  background-color: #fff;
}

#mainContent {
  display: inline-flex;
}

#vertical_line {
  border-left: 3px solid #bfa161;
  width: 60px;
}

<header>
  MY HEADER
</header>
<body>
  <div id="mainContent">
    <div>
      <p>THIS IS SIDEBAR</p>
    </div>
    <div id="vertical_line">
      <p>THIS IS MY CONTENT</p>
    </div>
  </div>
</body>
<footer>
  MY FOOTER
</footer>

edited Aug 18 '17 at 11:55

answered Aug 18 '17 at 10:58

Hash

7,726
9
34
53

– AK94 Aug 18 '17 at 11:32
Hi, thanks for replying, I just need this vertical bar with no content, I tried your approach but I just cant space the vertical bar from left, please help. – AK94 Aug 18 '17 at 11:34
@AK94 what you mean? can you edit your question and post your full code? left div should have `border-right: 3px solid #bfa161` if its the right div it should have `border-left: 3px solid #bfa161` – Hash Aug 18 '17 at 11:39
Hey, I kind of tried the approach , little tweak here and there and I got it, thanks, now actually I need to place the image at the top left of the screen, appreciate your help with this. https://stackoverflow.com/questions/45756725/placing-image-at-the-top-left-of-the-screen-in-html – AK94 Aug 18 '17 at 12:33

Adding a vertical line from the header border line to bottom in html and css

2 Answers2