左浮动div中相对定位的元素

Question

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?

Edit: Here's a jsfiddle version: http://jsfiddle.net/herrturtur/mPBgg/

Answer 1

I think I managed to produce something like what you wanted.

Brian was right. The letters are appearing there because you're putting them there with absolute positioning in the javascript, and there's not much you can do to fix it without messing with the JS. You had the letter absolutely positioned before via JQuery's .offset, but it just seem so much simpler to just remove that positioning entirely and let them go where they would normally with position: block , which is right on top of one another, so that's what I did:

CSS:

div#area {   //<--- you had a '.' instead of '#' here. Irrelevant, but I thought I'd mention it
    position: relative;
    border: 1px solid;
}

span.letter {
    display: block;   //<--- added this
    font-family: mono;
    font-size: 14;
}

JS:

/*
 * Draws one letter to the screen at the specified position.
 */
function createLetter(letter){    //removed extraneous parameter
    var letter = $('<span class="letter">' + letter + '</span>');
    $("#area").append(letter);
    //  letter.offset(position);  Commented this out to leave letters where they are
    return letter;
}

Since I removed the position parameter to the createLetter method, I also updated the one line of code where it was called in the createWord method. You seem to be passing around a parameter named position a lot, and if you apply the change I suggested I believe you'll be able to pull it out of several methods to make your code a bit more concise.

If you need them to go horizontally again, you can probably just remove the position: block with JS and maybe adding some padding to tweak it. As I said, your problem seemed so much better suited to normal positioning that I think that's the way to go.

You've also probably noticed that there's an extra J that wasn't there before. There were actually 2 J's previously, just stacked perfectly on top of each other so you couldn't seem them, but this change to normal document flow makes the first one reappear. If you need help getting rid of it I can look through your code again, but you should probably do so in another question since its so far digressed from your original problem in this one. :D

Answer 2

I THINK that the problem is that the CSS for span.letter has a position absolute, which positions it against the whole page, and not the local block.

I modified span.letter to be:

span.letter {
    font-family: mono;
    display: block;
}

This positioned them in the area block, which is what I think you're looking for.