title: CSS - Floating two elements side by side
body: <p>I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line. </p>
  
  <p>Here is what I have right now: <a href="http://jsfiddle.net/RALza/" rel="noreferrer">http://jsfiddle.net/RALza/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="divA"&gt; left text &lt;/div&gt;
      &lt;div id="divB"&gt;  right text &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#divA
  {
    float:left;
    border:1px solid blue;
    width:100%;
  }
  
  #divB
  {
    float:right;
    border:1px solid red;
  }
  </code></pre>