title: Right and left floating of odd and even elements
body: <p>Here's the problem. I got simple html template:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;&lt;div class="inside"&gt;
  
      &lt;div class="left"&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/div&gt;
      &lt;aside&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/aside&gt;
      &lt;div class="left"&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/div&gt;
      &lt;aside&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/aside&gt;
      &lt;div class="left"&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/div&gt;
      &lt;aside&gt;&lt;p&gt;Lorem ipsum...&lt;/p&gt;&lt;/aside&gt;
  
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And simple CSS:</p>
  
  <pre><code>div.wrapper {width:1020px;margin:0 auto;}
  div.wrapper .inside {padding: 10px;}
  div.left {width:700px;background:#EEE;float:left;border-top:1px solid #000; clear: left;}
  aside {width:300px;background:#CCC;float:right;border-top:1px solid #000; clear: right;}
  </code></pre>
  
  <p>I want all divs to be on the left side of the page, one after another, without any spacing and all asides on the righ side. And there it is. No matter how high the content of asides is the divs are working fine. But if the content of any div is too hight I'm getting empty space between asides, like there was something like clear:both along with this div.</p>
  
  <p>Example: </p>
  
  <p><img src="https://i.stack.imgur.com/o4Kwl.jpg" alt="enter image description here"></p>
  
  <p>I want it to always look like this, no empty spaces whatsoever: <img src="https://i.stack.imgur.com/WsoVP.jpg" alt="enter image description here"></p>
  
  <p>I cannot change html (divs&amp;asides order), I can change only CSS. I can use html5 and css3.</p>
  
  <p><a href="http://jsfiddle.net/HRp2H/" rel="nofollow noreferrer">http://jsfiddle.net/HRp2H/</a></p>