Create line to divide content with HTML and CSS

Question

I'm trying to divide the content of a webpage in two parts. The left side for a navbar and the right side for the main content of the page. I'm trying to use hr tag to create a line and divide the two parts but I'm having problems.

This is the HTML code:

<div id="left_content">
<nav class="main-menu">
 <ul>
  <li class="has-subnav">
   <a href="#">
    <i class="fa fa-laptop fa-2x"></i>
     <span class="nav-text">Stars Components</span>
   </a>                   
  </li>
 </ul>           
</nav>
</div>
<div class="vertical-line" style="height: 500px;"></div>
<div id="right_content>
...
</div>

This is the CSS code:

div.vertical-line{
      width: 0px;
      height: 100%;
      float: left; 
      border: 1px inset;
      background-color: #eeeeee;
      margin-left: 250px;
    }

This is one screenshot of the problem.

Any suggestion? Thanks for reading.

Sorry, could you clearly outline what the problem is and what you would like the outcome to be. — T. Short, Dec 26 '19 at 15:31
"hr" stands for "horizontal rule". Probably not the element you want to use for a vertical rule. There is no "vr" element though. — Heretic Monkey, Dec 26 '19 at 15:41
Or [How to make a vertical line in HTML](https://stackoverflow.com/q/3148415/215552). There are many questions about making vertical lines on Stack Overflow. Please search before asking. — Heretic Monkey, Dec 26 '19 at 15:42

score 0 · Answer 1 · answered Dec 26 '19 at 15:35

Here is the minimal layout technique with modern flexbox layout

.split-layout {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 30em) {
  .split-layout {
    flex-direction: row;
    align-items: stretch;
  }
}

.split-layout__item {
  flex: 1;
}

@media screen and (min-width: 30em) {
  .split-layout__item {
    padding-left: 1em;
  }
  .split-layout__item:first-child {
    padding: 0;
  }
}

.split-layout__divider {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media screen and (min-width: 30em) {
  .split-layout__divider {
    flex-direction: column;
  }
}

.split-layout__label {
  padding: 1em;
}

.split-layout__rule {
  flex: 1;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.3);
  border-width: 1px 0 0 0;
}

@media screen and (min-width: 30em) {
  .split-layout__rule {
    border-width: 0 1px 0 0;
  }
}


/* =DEMO STYLES
--------------------------------------------------------------------*/

html {
  padding: 2em;
  background: #3B4558;
  color: #fff;
}

<div class="wrapper">
  <div class="split-layout">

    <div class="split-layout__item">
      <h2>Navigation</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus? In beatae hic tenetur molestiae facilis illo neque esse repellendus harum. A, consequatur, labore.
      </p>
    </div>

    <div class="split-layout__divider">
      <div class="split-layout__rule"></div>
      <div class="split-layout__rule"></div>
    </div>

    <div class="split-layout__item">
      <h2>Content</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eos esse voluptates cupiditate expedita inventore, temporibus?
      </p>
    </div>

  </div>
</div>

score 0 · Answer 2 · answered Dec 26 '19 at 15:38

Use CSS grid. CSS grid is great for content layout.

body {
  font-family: Tahoma, sans-serif;
}

.grid {
  display: grid;
  grid-template-areas: 'cell-navbar cell-content cell-content cell-content';
}

.cell-navbar {
  grid-area: cell-navbar;
  border-right: thin solid #ccc;
}

.cell-content {
  grid-area: cell-content;
}

body,
main,
.cell-navbar,
.cell-content {
  height: 100vh;
}

<main class="grid">
  <div class="cell-navbar">Navbar</div>
  <div class="cell-content">Content</div>
</main>

More on CSS grid: enter link description here

score 0 · Answer 3 · answered Dec 26 '19 at 15:49

Try adding the following line to your CSS style

#left_content, #right_content { float:left; }

my preferred way of doing this,


        <style>
                #content { height: 100%; }

                #left_content, #right_content {
                    float:left; 
                }

                #left_content {
                    width:300px;
                }

                #right_content {
                    height:inherit; 
                    padding-left:30px;
                    border-left:2px solid #000;                 
                }
        </style>

    <body>

    <div id="content">
        <div id="left_content"> 
               left side content goes here 
        </div>          

        <div id="right_content"> 
            right side content goes here                
        </div>
    </div>

</body>

score -1 · Answer 4 · answered Dec 26 '19 at 15:41

Use flexbox instead, and draw the vertical line as border-right on #left_content:

.container{
  display:flex
}

#left_content{
  border-right: solid 1px #333;
  padding-right:20px;
}

#right_content{
  flex: 1 1 100%;
  background-color: lightblue;
  padding-left:20px;
}

<div class="container">
  <div id="left_content">
    <nav class="main-menu">
      <ul>
        <li class="has-subnav">
          <a href="#">
            <i class="fa fa-laptop fa-2x"></i>
            <span class="nav-text">Stars Components</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div id="right_content">
    ...
  </div>
</div>

Create line to divide content with HTML and CSS

4 Answers4