title: How to separate page vertically with drawing a vertical line in html
body: <p>I'm a newbie in html and try to find separate a webpage vertically with drawing vertical line but can't find
  Most of them that I found is initializing width with 50% and 50% or something. like below.</p>
  
  <pre><code>&lt;div id="left" style="float:left; width:15%;" &gt; This is left panel &lt;/div&gt;
  &lt;div id="right" style="float:left; width:85%;"&gt; This is right panel &lt;/div&gt;
  </code></pre>
  
  <p>However, I want to make a vertical line between two panels.</p>
  
  <p>How can I do that?
  Thanks</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.head {
    background-image: url(../img/internet-of-things-ionicframework.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    ##background: #000;
    padding: 50px 0;
    min-height: 500px;
    position: relative;
  }
  
  .head-content {
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
  }
  
  .head-content h2 {
    color: #000;
    font-size: 60px;
  }
  
  .head-content p {
    color: #000;
    font-size: 40px;
    margin-bottom: 30px;
  }
  
  .head-content .btn {
    border-radius: 2px;
    padding: 20px 30px;
  }
  
  main {
    min-height: 500px;
    padding: 50px 0;
  }
  
  footer {
    padding: 30px 0;
    font-size: 14px;
    color: #888;
    background: #222;
    text-align: center;
  }
  
  body {
    font-size: 18px;
    line-height: 1.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Welcome&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="/stylesheets/styles.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;nav class="navbar navbar-inverse"&gt;
        &lt;div class="collapse navbar-collapse" id="navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="#" id="deploy"&gt;Deploy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div id="container" style="width:100%;"&gt;
      &lt;div id="left" style="float:left; width:15%;"&gt; This is left panel &lt;/div&gt;
      &lt;div id="right" style="float:left; width:85%;"&gt; This is right panel &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>