title: Is it possible to stack unlimited divs left or right arbitrarily without a wrapper?
body: <p>I thought this would be (relatively) easy, but from the answers it seems harder than I anticipated. </p>
  
  <p>Perhaps even impossible! </p>
  
  <p><strong>GOAL</strong></p>
  
  <p>I'd like to have a large list of div elements that can arbitrarily be assigned a <code>.left</code> or <code>.right</code> class.  </p>
  
  <p>All the <code>.left</code> divs should stack up underneath each other on the left hand side, the <code>.right</code> divs should stack up underneath each other on the right hand side.  The number of divs in each class is arbitrary. </p>
  
  <p><img src="https://i.stack.imgur.com/Ywt0Y.png" alt="enter image description here"></p>
  
  <p><strong>THREE CONDITIONS</strong></p>
  
  <ol>
  <li><p>The height of each div will not be known in advance</p></li>
  <li><p>I would like them to stack up underneath each other on the assigned
  side, <strong>regardless of how many divs are present, what order they appear in, and how many are
  assigned to either side</strong>.</p></li>
  <li><p>I don't want to use a 'wrapper' div as some have suggested. This is
  because the solution must cater for random quantity and ordering of
  <code>.left</code> and <code>.right</code> divs (see example below).</p></li>
  </ol>
  
  <p>Ideally I'd like it to be a pure html / css solution, as backwards compatible as possible - though I realise this may prove unrealistic. </p>
  
  <p><strong>SAMPLE HTML</strong></p>
  
  <pre><code>&lt;div class="left"&gt;left one&lt;/div&gt;
  &lt;div class="left"&gt;left two&lt;/div&gt;
  &lt;div class="right"&gt;right one&lt;/div&gt;
  &lt;div class="left"&gt;left three&lt;/div&gt;
  &lt;div class="right"&gt;right two&lt;/div&gt;
  &lt;div class="right"&gt;right three&lt;/div&gt;
  &lt;div class="left"&gt;left four&lt;/div&gt;
  &lt;div class="right"&gt;right four&lt;/div&gt;
  &lt;div class="right"&gt;right five&lt;/div&gt;
  &lt;div class="left"&gt;left five&lt;/div&gt;
  &lt;div class="right"&gt;right six&lt;/div&gt;
  &lt;div class="right"&gt;right seven&lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After so many answers I'm impressed by the range of answers/techniques, but none of them quite meet all of the conditions. </p>
  
  <p>Hence I'm staking a quarter of my meagre reputation on trying to get a solid solution! </p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>It seems that my original goal is undoable. Therefore I have not marked any as the answer, although having put up a bounty I awarded it to Josh who gave me the best way of (almost) achieving that, along with great explanations of the css he used.</p>
  
  <p>Thanks everyone for your help and ideas. </p>