Vertical line in flex-CodePudding

I'm trying to figure out how to apply a vertical line that will extend all the way down between the two elements which are the sidebar and the main content. This will be my last problem in doing my website and I hope someone can help us solve my problem. I tried the border-right in my sidebar but it does not extend all the way down.

https://jsfiddle.net/chrismontage/43j1z0L8/5/

/*COLOR PALETTE*/

$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;

/*FONTS*/

$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.line {
  padding: 8px;
  border-bottom: 1px solid #C4B0AC;
}

.sidebar ul {
  list-style: none;
  text-align: center;
}

.sidebar ul li a {
  text-decoration: none;
  color: #000000;
  font-family: Neue Montreal;
  font-weight: lighter;
  font-size: 20px;
  padding: 10px;
}

.first a {
  background-color: #ebe0dd;
  ;
}

.sidebar a:hover {
  color: #B87D6F;
}

.item1,
.item2 {
  padding: 1.5%;
  background-color: #F4F4F4;
}

.item1 {
  margin-bottom: 2%;
}

.brand-and-desc h4 {
  font-family: $font1;
  font-weight: normal;
  font-size: 15px;
  color: #545454;
}

.status-and-price h4 {
  font-family: Neue Montreal;
  font-weight: normal;
  font-size: 15px;
  text-align: right;
  color: #545454;
}

.contact h4 {
  color: #FFFFFF;
  background-color: #B87D6F;
  font-family: Neue Montreal;
  font-size: 13px;
  width: 20%;
  align-items: center;
}

.contact a {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #B87D6F;
  padding: 1px 9px;
  font-size: 15px;
  font-family: Neue Montreal;
  font-weight: normal;
}

.contact a:hover {
  color: #A6A6A6;
}

.contact a:active {
  color: #A6A6A6;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HIRAYA | Cart</title>
  <link rel="stylesheet" href="/styles/sidebar.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>

  <div >
    </hr>
  </div>

  <div >
    <header >

      <div >
        <ul>
          <li ><a href="#">All</a></li>
          <li ><a href="#">To Pay</a></li>
          <li ><a href="#">To Ship</a></li>
          <li ><a href="#">To Receive</a></li>
          <li ><a href="#">Completed</a></li>
          <li ><a href="#">Cancelled</a></li>
        </ul>
      </div>
    </header>


    <div  style="width: 80%;">
      <div >
        <div >
          <img  src="/images/charrr.png" alt="" style="width: 50%;">
          <img  src="/images/charlottewhite.jpg" alt="" style="width: 100%;">

        </div>

        <div >
          <h4>Charlotte Folk</span>
          </h4>
          <h4>CFXXI Sweater</h4>
          <h4>Large</h4>
          <h4>x1</h4>
        </div>

        <div >
          <h4>To Pay</h4>
          <h4>P990</h4>
        </div>

        <div ><a href="#">
              Contact Seller</a>
        </div>
      </div>

      <div >
        <div >
          <img  src="/images/homelandlogo.png" alt="" style="width: 50%;">
          <img  src="/images/homelandproduct.png" alt="" style="width: 100%;">
        </div>

        <div >
          <h4>Homeland</span>
          </h4>
          <h4>Care Reminder™ Tee Oversized Boxy Tee - Wheat</h4>
          <h4>Oversized Large</h4>
          <h4>x1</h4>
        </div>

        <div >
          <h4>Completed</h4>
          <h4>P649</h4>
        </div>

        <div ><a href="#">
            Contact Seller</a>
        </div>
      </div>
    </div>




    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

So I was messing around with your jsfiddle and the following seems to work.

In the HTML add vh-100 to your <header> to make it the full height.

 <header class = "sidebar vh-100">

And in CSS add some quick code for the border of <header> like you tried before.

.sidebar{
border-right: 1px solid blue;
}

CodePudding user response：

Be careful of making semantic errors in your markup. I noticed there were some spacing issues and random closing </span> tags in your HTML.

With that being said, you can add vh-100 class to your .sidebar for it to stand the entire viewport height and add the border-right styles following that. You can then using padding to separate the border from the ul.

/*COLOR PALETTE*/

$color1: #B87D6F;
$color2: #EBE0DD;
$color3: #FFFFFF;
$color4: #737373;
$color5: #C4B0AC;
$color6: #545454;
$color7: #A6A6A6;
$color8: #F4F4F4;
$color9: #000000;
$color10: #ebe0dd;

/*FONTS*/

$font1: Neue Montreal;
$font2: Neue Einstellung;
$font3: Maharlika;
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.line {
  padding: 8px;
  border-bottom: 1px solid #C4B0AC;
}

.sidebar {
  border-right: solid 1px black;
  padding-right: 1em;
}

.sidebar ul {
  list-style: none;
  text-align: center;
}

.sidebar ul li a {
  text-decoration: none;
  color: #000000;
  font-family: Neue Montreal;
  font-weight: lighter;
  font-size: 20px;
  padding: 10px;
}

.first a {
  background-color: #ebe0dd;
  ;
}

.sidebar a:hover {
  color: #B87D6F;
}

.item1,
.item2 {
  padding: 1.5%;
  background-color: #F4F4F4;
}

.item1 {
  margin-bottom: 2%;
}

.brand-and-desc h4 {
  font-family: $font1;
  font-weight: normal;
  font-size: 15px;
  color: #545454;
}

.status-and-price h4 {
  font-family: Neue Montreal;
  font-weight: normal;
  font-size: 15px;
  text-align: right;
  color: #545454;
}

.contact h4 {
  color: #FFFFFF;
  background-color: #B87D6F;
  font-family: Neue Montreal;
  font-size: 13px;
  width: 20%;
  align-items: center;
}

.contact a {
  text-decoration: none;
  color: #FFFFFF;
  background-color: #B87D6F;
  padding: 1px 9px;
  font-size: 15px;
  font-family: Neue Montreal;
  font-weight: normal;
}

.contact a:hover {
  color: #A6A6A6;
}

.contact a:active {
  color: #A6A6A6;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HIRAYA | Cart</title>
  <link rel="stylesheet" href="/styles/sidebar.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div ></div>
  <div >
    <header >
      <div >
        <ul>
          <li ><a href="#">All</a></li>
          <li ><a href="#">To Pay</a></li>
          <li ><a href="#">To Ship</a></li>
          <li ><a href="#">To Receive</a></li>
          <li ><a href="#">Completed</a></li>
          <li ><a href="#">Cancelled</a></li>
        </ul>
      </div>
    </header>
    <div  style="width: 80%;">
      <div >
        <div >
          <img  src="/images/charrr.png" alt="" style="width: 50%;">
          <img  src="/images/charlottewhite.jpg" alt="" style="width: 100%;">
        </div>
        <div >
          <h4>Charlotte Folk</h4>
          <h4>CFXXI Sweater</h4>
          <h4>Large</h4>
          <h4>x1</h4>
        </div>
        <div >
          <h4>To Pay</h4>
          <h4>P990</h4>
        </div>
        <div ><a href="#">
              Contact Seller</a>
        </div>
      </div>
      <div >
        <div >
          <img  src="/images/homelandlogo.png" alt="" style="width: 50%;">
          <img  src="/images/homelandproduct.png" alt="" style="width: 100%;">
        </div>
        <div >
          <h4>Homeland</h4>
          <h4>Care Reminder™ Tee Oversized Boxy Tee - Wheat</h4>
          <h4>Oversized Large</h4>
          <h4>x1</h4>
        </div>
        <div >
          <h4>Completed</h4>
          <h4>P649</h4>
        </div>
        <div ><a href="#">
            Contact Seller</a>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>
</html>