Question

I’d like to apply absolute position inside the a div that’s floated to the right.

Here’s my HTML

<div>
   <div id="membership">
       <span><a href="#">Login</a></span>
       <span><a href="#">Join Us</a></span>
   </div>
</div>

and this is my CSS

#membership
{
  float:right;
  text-align:right;
}

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.

To apply absolute position to an element, its parent needs to have at list the property position set to relative. Given that for thos 2 spans, their parent is rather floated, how to apply absolute positionning?

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.

Thanks for helping.

Answer 1

Whether or not a parent is floated has nothing to do with the absolute positioning of its child. If you apply absolute positioning to those child spans supposing the following:

#membership span {position: absolute; top: 0; left: 0}

they will be positioned relative to the next parent with relative positioning. If no parent has relative positioning, it will be positioned relative to the body.

What absolute positioning does is places elements at a specific X and Y coordinate (relative to the closest parent with position: relative). Those ‘absolute’ elements will maintain their positioning regardless of additional sibling elements, (floated, block, inline, or otherwise) before or after those ‘absolute’ elements. An additional side effect of absolute positioning is that the height of the parent element will be uneffected by the height or position of those ‘absolute’ elements, so if those elements are the only children of that #membership div, it must have a declared height and width in order to take up real space in your layout.