Weird absolute positioning error (or maybe I'm simply stupid)

I'm trying to position a certain piece of information within a <li> so as to confine it to the right bottom part of the box. Now, looking into the code:

<ul class="tweet_list">
    <li class="tweet_first tweet_odd">
        <a class="tweet_avatar" href="http://twitter.com/">
            <img width="48" border="0" height="48" title=" avatar" alt=" avatar" src="">
        </a>
        <span class="tweet_text">
            @
            <a href="http://twitter.com/"></a>
            lololol
        </span>
        <div class="tweet_actions">
            <img title="Twitter" src="images/twitter/bird_16_blue.png" />
            <time datetime="111-7-2T17:6:2">2/7</time>
            <a class="tweet_action tweet_reply" target="_blank" title="Reply" href="http://twitter.com/intent/tweet?in_reply_to=">
                <img title="Reply" src="images/twitter/reply.png">
                Reply
            </a>
            <a class="tweet_action tweet_retweet" target="_blank" title="Retweet" href="http://twitter.com/intent/retweet?tweet_id=">
                <img title="Retweet" src="images/twitter/retweet.png">
                Retweet
            </a>
            <a class="tweet_action tweet_favorite" target="_blank" title="Favorite" href="http://twitter.com/intent/favorite?tweet_id=">
                <img title="Favorite" src="images/twitter/favorite.png">
                Favorite
            </a>
    </div>
</li>
<!-- These are all the same as the previous li-->
<li class="tweet_even">
<li class="tweet_odd">
<li class="tweet_even">
<li class="tweet_odd">
</ul>

and the CSS:

div#sidebar-twitter ul {
    list-style: none outside none;
    text-align: left;
}
div#sidebar-twitter ul li {
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
    height: 58px;
    margin-bottom: 10px;
    max-height: 78px;
    min-height: 58px;
    width: 400px;
}
div#sidebar-twitter ul li a.tweet_avatar {
    float: left;
    padding: 5px;
}
div#sidebar-twitter ul li div.tweet_actions {
    bottom: 0;
    position: absolute;
    right: 0;
}
div#sidebar-twitter ul li:last-child {
    margin-bottom: 0;
}

As you can see, I'm expecting div.tweet_actions to position itself to the right bottom part of the <li> box, which should be 400x(58/78). Problem is, it doesn't. It positions itself to the right bottom of its parent element, section#left-content.sidebar-content.left... Now, any ideas on how to position this div.tweet_actions at the bottom right part of the &开发者_Go百科lt;li> would be most welcome...

You need to add position:relative to div#sidebar-twitter ul li.

div#sidebar-twitter ul li {
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
    height: 58px;
    margin-bottom: 10px;
    max-height: 78px;
    min-height: 58px;
    width: 400px;
    position: relative; /* add this */
}

Doing this will make the absolute positioning of div.tweet_actions relative to the li.