title: How to use absolute element when its closet ancestor is a float element?
body: <p>I'd like to apply absolute position inside the a div that's floated to the right.</p>
  
  <p>Here's my HTML</p>
  
  <pre><code>&lt;div&gt;
     &lt;div id="membership"&gt;
         &lt;span&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/span&gt;
         &lt;span&gt;&lt;a href="#"&gt;Join Us&lt;/a&gt;&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS</p>
  
  <pre><code>#membership
  {
    float:right;
    text-align:right;
  }
  </code></pre>
  
  <p>I'm using "SUPERPREVIEW" to compare the rendering of the page on different browsers. They are always a difference in terme of position in termes of elements.</p>
  
  <p>To apply absolute position to an element, its parent needs to have at list the property position set to <strong>relative</strong>. Given that for thos <strong>2 spans</strong>, their parent is rather floated, how to apply <strong>absolute</strong> positionning?</p>
  
  <p>In IE6, IE7, IE8, for instance, there's laways a extra pixel that is added on top of those 2 spans campare to FF3.6.1.6 and IE9.</p>
  
  <p>Thanks for helping. </p>