title: How do you put two divs next to each other so they fill up the available space
body: <p>I have two divs, the right one is 80px wide the other should fill up the remaining space. So far I tried:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;#{get 'title' /}&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              margin: 0;
              padding: 0;
          }
  
          #left {
              position: relative;
              margin-right: 80px;
              background-color: red;
          }
  
          #right {
              float: right;
              position: relative;
              text-align: left;
              width: 80px;
              background-color: yellow;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="left"&gt;
      Left
  &lt;/div&gt;
  &lt;div id="right"&gt;
      Right
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, the right box is always put below the left box and not right to it. I guess it is because of the margin. I also tried a margin-left: -80px on the right one but this doesnt seem to change anything. So how do I have to change the CSS so that the right div is in the same line as the left div?</p>