title: CSS for two columns which float left
body: <p>I want to display two pieces of text side by side in columns using CSS. The left-hand column text is variable in length, and the right-hand text is fixed and always the same length.</p>
  
  <p>I want the two "columns" to float to the left next to each other e.g.</p>
  
  <pre><code>[Variable Text] [Fixed text]
  </code></pre>
  
  <p>If the variable text is long I want it to wrap. 
  eg,</p>
  
  <pre><code>Here is a very long  Hello World
  piece of variable
  text which wraps
  </code></pre>
  
  <p>My code works if the variable text is short, but I get unwanted whitespaces if the variable text wraps.
  eg,</p>
  
  <pre><code>Here is a very long               Hello World
  piece of variable
  text which wraps
  </code></pre>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    margin-right: 100px;
  }
  #left-col {
    float: left;
    max-width: 100%;
    background-color: #CCF;
  }
  #right-col {
    float: left;
    width: 100px;
    margin-right: -100px;
    background-color: #FFA;
  }
  #cleared {
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
        &lt;div id="left-col"&gt;Here is a very long piece of text which wraps&lt;/div&gt;
        &lt;div id="right-col"&gt;Hello World&lt;/div&gt;
        &lt;div id="cleared"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>