title: CSS floating and positioning
body: <p>I have 2 boxes that should show up next to eachother. I want one to have a vertical fixed position. 
  So when I scroll up or down the box stays at the same height.  </p>
  
  <p>But I don't want it to be horizontal fixed, because I want the 2 boxes together always in the center. Even when you make your browser bigger or smaller. For this I use the margin: 20px auto;  </p>
  
  <p>Is there any way <strong><em>how I can keep the margin and get 2 boxes where 1 of them has a vertical fixed position.</em></strong>   </p>
  
  <p>Just like this website when making a post. There is a the main page with the question and a sidebox with similar question that always stays on the screeen.  </p>
  
  <p>My code so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="icon" type="image/png" href="/favicon.ico"&gt;
      &lt;style&gt;
          html,
          body {
              background-color: #026642;
          }
          #container {
              width: 800px;
              margin: 20px auto;
              position: relative;
          }
          #sidebox {
              background-color: white;
              padding: 5px;
              margin: 5px;
              border-radius: 5px;
              width: 180px;
              position: absolute;
          }
          #indexcontainer {
              padding: 10px;
              background-color: #FFD302;
              border-radius: 20px;
              width: 580px;
              position: absolute;
          }
          #header {
              text-align: center;
          }
          #content {
              background-color: white;
              padding: 5px;
              margin: 5px;
              border-radius: 5px;
          }
          #content i {
              font-size: 14px;
          }
          #footer {
              clear: both;
              padding: 0 5px;
              font-size: 11px;
              clear: both;
          }
          a:link {
              text-decoration: none;
              color: black;
          }
          a:visited {
              text-decoration: none;
              color: black;
          }
          a:hover {
              text-decoration: underline;
              color: black;
          }
          a:active {
              text-decoration: underline;
              color: black;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="sidebox"&gt;
              Sidebox
          &lt;/div&gt;
          &lt;div id="indexcontainer"&gt;
              &lt;div id="header"&gt;
                  &lt;img src="images/emte.jpg" alt="logo" width="200" height="100"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div id='content'&gt;
                  Main text box
              &lt;/div&gt;
              &lt;div id="footer"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>How it needs to work:</p>
  
  <p><img src="https://i.stack.imgur.com/DywSZ.jpg" alt=""></p>