Creating vertical alignment in flexbox

How can I add a vertical line that extends between the sidebar and main content on my website? The border-right in my sidebar only goes partway down, and I need it to go all the way. Any help would be greatly appreciated!

Link to code snippet

/* Put your CSS code here */
<!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>Your Title Here</title>
            <link rel="stylesheet" href="/styles/sidebar.css">
            <link href="bootstrap.min.css" rel="stylesheet">

          </head>

          <body>

            <div class="line">
              </hr>
            </div>

            <!-- Your HTML content goes here -->

            <script src="bootstrap.bundle.min.js" integrity="sha384-yourhashhere" crossorigin="anonymous"></script>
          </body>
          
        </html>
htmlcsstwitter-bootstrapflexboxbootstrap-5

Answer №1

While experimenting with your jsfiddle, I found a solution that seems to be effective.

To achieve full height in the HTML, simply add vh-100 to your <header>.

 <header class = "sidebar vh-100">

Additionally, you can include some quick CSS code for the border of <header>, similar to what you attempted previously.

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

Answer №2

Make sure to double-check your markup for semantic errors. I observed some spacing irregularities and unexpected closure of </span> tags in your HTML code.

In addition, consider applying the vh-100 class to your .sidebar element to make it take up the full viewport height, followed by adding the necessary border-right styles. Use padding to create separation between the border and the ul elements.

/*CUSTOM COLOR PALETTE*/

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

/*DEFINED 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">
  ......
  <link rel="stylesheet" href="/styles/sidebar.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b647b66">[email protected]</a>/dist/css/bootstrap.min.css" ......
</head>
......
      <header class="sidebar-wrapper">
        .....

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem encountered with the submission feature in Zend Framework

I am encountering an issue with the submit button icon not displaying. In my .php file, I have the following code: $submit = new Zend_Form_Element_Submit('submit'); $submit ->setLabel(Zend_Registry::get('Zend_Translate')->tra ...

phpcsszend-frameworkzend-formzend-framework-mvc

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

javascriptjqueryhtmlangularjs

The element residing within the body exceeds the body's dimensions

HTML : <body> <header> <div> </div> </header> </body> CSS : body { width : 1000px ; } header { width : 100% ; } If these codes are implemented, The header's width should be the same as the body's ...

htmlcss

How to place a stylish font over an image and recreate hover effects

I am looking to place social media icons below an image next to the photo's title, including Facebook, Twitter, Soundcloud, and Instagram. I want these icons to rotate along with the image when it is hovered over. HTML <div class="polaroid-image ...

javascriptjqueryhtmlcssimage

Struggling to make the AJAX script function properly

I have a table containing a list of transactions and I am attempting to update the table contents at specific intervals. The web page is hosted on a Linux Red Hat server, and currently, only the AJAX functionality is not functioning as expected. <!do ...

javascripthtmlajax

Find the number of nested ng-repeats within the outermost ng-repeat and adjust it automatically based on the value of ng-model

Having three nested ng-repeat to showcase the drives, their respective folders, and files. An example data set is illustrated below Drives=[ { name:'C Drive', folders:[ { name:'personal', ...

htmlangularjsangularjs-ng-repeatangularjs-filterangularjs-ng-model

How do I change the class of an element using $this?

Please review the code below: $(".nwe-cl-icontext").click(function () { $(this).parent().toggleClass("nwe-active"); }) .nwe-cl-c.nwe-active { background: red; } .nwe-cl-c { background: green; } <scrip ...

htmljquerycss

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

Modify the location of the input using jQuery

Hey there, I've got this snippet of HTML code: <div class='moves'> <div class='element'><input type='text' value='55' /></div> <input class='top' type='text&apo ...

javascriptjqueryhtmlcss

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

I am facing an issue with a contact form where I have included a link to refresh a captcha code upon clicking. Additionally, there is jQuery code that ensures a div remains open by applying CSS styles to it. Both of these functionalities work independently ...

phpjquerycss

Separating text for tooltips from the element itself

I'm looking to enhance my website by adding tooltip descriptions to elements based on their CSS classes. While tooltips are usually added using the element's title attribute, I have numerous elements with the same lengthy description and want to ...

javascriptjqueryhtmlcsstooltip

Create a new button dynamically within an HTML table row using pure JavaScript programming techniques

Currently, I am retrieving JSON data from an API and then displaying this data in an HTML table using plain JavaScript. My goal is to dynamically add a button at the end of each row for additional functionality, but so far, I have been unable to figure out ...

javascripthtmlhtml-table

How can I turn off the Jumbotron specifically for mobile devices in Bootstrap 4?

I have implemented a jumbotron on my website to create a full-height page on desktop, but I would like to disable the jumbotron on the mobile version. The content inside the jumbotron is extending beyond the available space on mobile, causing overlap wit ...

htmlcssbootstrap-4

Using Javascript to dynamically add form fields based on the selection made in a combo box

I am in the process of creating an information submission page for a website, where various fields will need to be dynamically generated based on the selection made in a combo box. For example, if the user selects "2" from the combo box, then two addition ...

phpjavascripthtmlvalidation

Utilizing inline border style on table cells with text inputs for enhanced design

I'm looking for a way to style certain <td> elements in my table to make them appear as text inputs within the cells. In the past, I would add an extra <div> or <span> inside the cell and then apply border, margin, and padding styles ...

htmlcss

The navigation bar is positioned at the forefront, blocking any elements from being displayed beneath it

I just started using Bootstrap and I'm facing an issue with my navbar. No matter what I do, anything I place goes behind it. Even with margins and the native padding from Bootstrap, I can't get the distance right because the div that I want to mo ...

htmlbootstrap-5

When overflowY is set to auto, the dropdown may be cut off if there are

https://i.sstatic.net/Twcnp.png My col-4 has overflow-y set to auto, but my dropdown gets cut off behind another col when it's open. If I change overflow-y to visible, the dropdown is no longer cut off but the max-height parameter is ignored. const ...

htmlcssreactjsoverflow

Ways to stylize bullet points in lists with CSS in HTML document

I am currently working on a Q&A page using simple HTML. This is the current appearance of my page. Check it out here on JSFIDDLE. My task involves adding an 'A' to the answer for each question. Some answers have multiple paragraphs, so the ...

htmlcss

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

javascripthtmlangulartypescriptangularjs-directive

What is the best way to highlight titles that are unique but still prominent?

.test{ display:none; } .title:nth-child(odd){ background: #ddd; } <div class='title'>lorem</div> <div class='title'>lorem</div> <div class='title test'>lorem</div> <div class='tit ...

htmlcss