title: CSS move multiple list item to the right and up
body: <p>I have a list of items on my page that are in a vertical column (shape wise not HTML5 column) and I want one or many of the items to move to the right and essentially drop out of the set and move all the way back to the top inline.</p>
  
  <p>Something like </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
    &lt;li&gt;
    &lt;li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>would go to</p>
  
  <pre><code>&lt;ul&gt;      &lt;li&gt;
    &lt;li&gt;
    &lt;li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>I know this can be done with an absolute position but it is supposed to be done in dynamic fashion, such that the items will be rendered and then moved, so I was wondering if there is any trick out there in CSS land that can make this possible. Sorry for the limited knowledge of the extent of the situation.  A pure javascript (not jquery or other lib) solution that would work in IE7 could potentially work, maybe just a solution that does a count on object that have an absolute positioning and then uses the count and height to determine the top value?</p>
  
  <p>Thanks for listening, looking, and maybe helping!</p>
  
  <p>P.S. <a href="http://jsfiddle.net/Mutmatt/LpXn5/1/" rel="nofollow">http://jsfiddle.net/Mutmatt/LpXn5/1/</a> or <a href="http://jsfiddle.net/Mutmatt/LpXn5/4/" rel="nofollow">http://jsfiddle.net/Mutmatt/LpXn5/4/</a> depending on if you like divs or lists (i don't care if you can make it work one way or the other)</p>