title: CSS alternate floating of DIVs
body: <p>I have the following html code:</p>
  
  <pre><code>&lt;div class="messages"&gt;
      &lt;div class="message"&gt;1&lt;/div&gt;
      &lt;div class="message"&gt;2&lt;/div&gt;
      &lt;div class="message"&gt;3&lt;/div&gt;
      &lt;div class="message"&gt;4&lt;/div&gt;
      &lt;div class="message"&gt;5&lt;/div&gt;
      &lt;div class="message"&gt;6&lt;/div&gt;
      &lt;div class="message"&gt;7&lt;/div&gt;
      &lt;div class="message"&gt;8&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is do some alternate float with them using odd/even nth-child selectors. However I want something a little more sophisticated. Instead of having each message node do a "clear", I want them to be able to stick close to the node on top of them. Is this possible through CSS only?</p>
  
  <p><img src="https://i.stack.imgur.com/jzi10.png" alt="enter image description here"></p>
  
  <p>Edit:
  There is no need to randomly assign heights for the boxes. Each of the boxes will have body of text inside of them (people's comments) which will make the heights variable for each one. I'm sorry if I failed to illustrate that here.</p>