Relatively positioned elements in a float left div

Using css: Relatively positioned elements in a float left div on newest questions tagged css – Stack Overflow

I have the following css:

.contents{
    width: 70%;
    float: right;
}

.sidebar{
    width: 25%;
    float: right;
}

div.area {
    position: relative;
    border: 1px solid;
}

span.letter {
    position: absolute;
    font-family: mono;
    font-size: 14;
}

and the following html structure:

<div class="sidebar">

</div>
<div class="content">
    <button id="button">>>></button>
    <div id="area">
        <span class="letter"></span>
        <span class="letter"></span>
        <span class="letter"></span>
        ...
    </div>
</div>

However, the letters, which are later position using the jquery.animate({left: ?px, top: ?px}) function, show up in the sidebar.

I should mention that I initially had the button and area-div on their own page, where the problem didn’t occur to me.

How do I get the letters back in the area div?

source: http://stackoverflow.com/questions/11278685/relatively-positioned-elements-in-a-float-left-div
Using css: using-css