title: Separate sidebar from image
body: <p>I don't want the sidebar to OVERLAP image.
  So basically I want them, side by side, I think the problem is that I have a position: absolute; in the sidebar, but when I remove it, the sidebar and image doesn't stay in place.</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>body {
    text-decoration: none;
    margin: 0 auto;
    max-width: 100% !important;
    height: auto;
  }
  .fundo img {
    max-width: 100% !important;
    height: auto;
  }
  .menuleft {
    background-color: #CDD0D2;
    list-style-type: none;
    position: absolute;
    width: 9%;
    height: 100%;
    display: table;
  }
  .menuleft ul {
    display: table-cell;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    vertical-align: middle;
  }
  #text {
    -webkit-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
    box-shadow: inset -7px 4px 5px 0px rgba(0, 0, 0, 0.22);
    width: 100%;
    height: 17%;
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: #F06D22;
  }
  .menuleft li a {
    font-family: Futura LT, 'Trebuchet MS', Arial;
    letter-spacing: 0.28vw;
    color: #fff;
    text-decoration: none;
    height: 100%;
    text-align: center;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    width: 100%;
    writing-mode: tb-rl;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    white-space: nowrap;
  }
  .menuleft li:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2);
  }
  .menuleft li a:hover {
    text-decoration: none;
    color: #fff;
  }
  #whitebar {
    text-decoration: none;
    display: table;
    width: 100%;
    height: 3px;
    background-color: #fff;
    writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(180deg);
    white-space: nowrap;
    bottom: 0;
    margin: 0 auto;
  }
  .image {
    width: 92%;
    height: 100%;
  }
  .image img {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="menuleft"&gt;
    &lt;ul&gt;
      &lt;li id="text"&gt;
        &lt;a href="#"&gt;Eficácia&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="whitebar"&gt;
      &lt;/li&gt;
      &lt;li id="text"&gt;
        &lt;a href="#"&gt;Rapidez&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="whitebar"&gt;
      &lt;/li&gt;
      &lt;li id="text"&gt;
        &lt;a href="#"&gt;Impacto &lt;br&gt; na vida real&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="whitebar"&gt;
      &lt;/li&gt;
      &lt;li id="text"&gt;
        &lt;a href="#"&gt;Tecnologia &lt;br&gt; avançada&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="whitebar"&gt;
      &lt;/li&gt;
      &lt;li id="text"&gt;
        &lt;a href="#"&gt;Segurança&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="image"&gt;
    &lt;img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>