title: How can I solve this html CSS positioning issue
body: <p>I am trying to create header, left nav, content area, right nav and footer.
  But my content area is streching and right nav is underneath content area. I want right nav to be underneath header. And only content area should stretch or narrowed while resizing window. Left nav and Right nav I want is fixed size.
  How can I solve this issue?
  I am new in css.
  Thank you in advance.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;My Website&lt;/title&gt;
    &lt;style&gt;
      body {
        min-height: 100%;
        position: relative;
        padding: 0;
        margin: 0;
      }
      
      .header {
        background-color: navy;
        color: white;
        position: fixed;
        z-index: 1;
        height: 30px;
        width: 100%;
      }
      
      .main {
        position: relative;
        top: 30px;
      }
      
      .content {
        position: relative;
        left: 230px;
      }
      
      .left-navbar {
        background: steelblue;
        position: fixed;
        top: 30px;
        height: 100%;
        width: 230px;
        z-index: 2;
      }
      
      .content-area {
        position: relative;
        background: aqua;
      }
      
      .right-sidebar {
        position: fixed;
        background: lightblue;
        right: 0;
        height: 100%;
        width: 230px;
        z-index: 3;
      }
      
      .footer {
        background: yellow;
        position: relative;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class='app'&gt;
      &lt;div class='header'&gt;
        Header
      &lt;/div&gt;
      &lt;div class='main'&gt;
        &lt;div class='left-navbar'&gt;
          Left Sidebar
        &lt;/div&gt;
        &lt;div class='content'&gt;
          &lt;div class="content-area"&gt;
            Content Area
          &lt;/div&gt;
          &lt;div class='right-sidebar'&gt;
            Right Sidebar
          &lt;/div&gt;
          &lt;footer class='footer'&gt;
            Footer
          &lt;/footer&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I solved it like below. Can someone say me that it's standard solution or not? Thanks</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;My Website&lt;/title&gt;
    &lt;style&gt;
      body {
        min-width: 100%;
        padding: 0;
        margin: 0;
        height: 100%;
      }
  
      header {
        background-color: blue;
        color: white;
        position: fixed;
        width: 100%;
        height: 35px;
        z-index: 1;
      }
  
      .left-nav {
        background-color: yellow;
        position: fixed;
        top: 35px;
        width: 230px;
        height: 100%;
        z-index: 2;
      }
  
      .right-sidebar {
        background-color: aqua;
        position: fixed;
        top: 35px;
        right: 0;
        width: 230px;
        height: 100%;
        z-index: 3;
      }
  
      .content {
        position: absolute;
        top: 35px;
        left: 230px;
        right: 230px;
        width: auto;
      }
  
      .main {
        background-color: darkgreen;
      }
  
      footer {
        background-color: darkred;
      }
  
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
      Header
    &lt;/header&gt;
    &lt;nav class="left-nav"&gt;
      Left Navbar
    &lt;/nav&gt;
    &lt;div class="right-sidebar"&gt;
      Right Sidebar
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;div class="main"&gt;
        &lt;p&gt;The header will stick to the top when you reach its scroll position. The header will stick to the top when you reach its scroll position. The header will stick to the top when you reach its scroll position.&lt;/p&gt;
      &lt;/div&gt;
      &lt;footer&gt;
        Footer
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>