title: Alignment Issue with Floats Next to Absolutely Positioned Elements Inside a List
body: <p>I'm trying to place an absolutely positioned element next to a floating element. This seems to work, however the inline list element moves up.</p>
  
  <p>To stop this from happening I can either take out the <code>float: right</code> or take out the <code>position: absolute</code>. The reason I need to use <code>position: absolute</code> is because my actual code relies on an image instead of the text "World".</p>
  
  <p>How can I stop this from happening? The <code>clear: both</code> doesn't appear to be doing anything.</p>
  
  <p><a href="http://jsfiddle.net/wJF9T/2/" rel="nofollow">http://jsfiddle.net/wJF9T/2/</a></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Hello&lt;/li&gt;
      &lt;li&gt;
          &lt;div class="wrapper"&gt;
              &lt;i&gt;World&lt;/i&gt;
              &lt;span&gt;Again&lt;/span&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  
  ul {
      list-style-type:none;
  }
  
  li {
      display: inline-block;
      padding: 10px;
      background: aqua;
  }
  
  .wrapper {
      position: relative;
      margin: 0 auto;
      clear: both;
      width: 100px;
  }
  
  i {
      position:absolute;
      top: 0;
      left: 0;
  }
  
  span {
      float: right;
  }
  </code></pre>