css - задание top

[Derekovich]

Доброго времени суток!
Ребята подскажите пож-та, сижу целый день не могу разобраться.
Собственно проблема - есть два блока с разной высотой контента, и мне нужно, чтобы ссылки в этих блоках были на одинаковом уровне в любом случае. Я решил мерять позицию top, получать макс кол-во, вычислять разницу у элемента с меньшим top и прибавлять то чего не хватает до максимального значения. Все работает но! есть одно но! Стандартно у браузера стоит

body margin 8px

и высота увеличивается на 8px, я немного не понимаю как она считается? и причем тут margin вообще, ведь если я не ошибаюсь, то если элемент relative, то позиция top считается от края родителя, а это у нас div.
Заранее благодарен!!!

<ul>
    <li style="float: left; width:50px;">
        <div style="background-color: green; width: 50px;">
            <a class="test" style="display: inline-block; position: relative; top:70px;" href="#">555555</a>
        </div>
    </li>
    <li style="float: left; width:50px;">
        <div style="background-color: cadetblue; width: 50px; ">
            <a class="test" style="display: inline-block; position: relative; top:50px;" href="#">2122221</a>
        </div>
    </li>
</ul>

var topResults = [];
    $('.test').each(function(){
        topResults.push($(this).position().top);
    });
    var maxResult = Math.max.apply( Math, topResults );

    $('.test').each(function(){
        if ($(this).position().top < maxResult ) {
            $(this).css('top', $(this).position().top + (maxResult - $(this).position().top));
        }
    });

[рони]

Derekovich,
http://www.cssreset.com/
http://habrahabr.ru/post/45296/

[danik.js]

если элемент relative, то позиция top считается от края родителя

Ничего подобного. При relative позиция отсчитывается от начального положения элемента.

Возможно не совсем верно понял, но уверен что можно сделать на css:

<style>
ul{
display: table;
table-layout: fixed;
}
li{
display: table-cell;
width: 50px;
vertical-align: top;
position: relative;
}
div{
margin-bottom: 25px;
}
a{
    position: absolute;
    bottom: 10px;
}
</style>
<ul>
    <li>
        <div style="background-color: green; width: 50px;">
            Контент<br />
            <a class="test" href="#">555555</a>
        </div>
    </li>
    <li>
        <div style="background-color: cadetblue; width: 50px; ">
            Контент<br />
            Еще контент.<br />
            <a class="test" href="#">2122221</a>
        </div>
    </li>
</ul>