css - задание top
 

Доброго времени суток!
Ребята подскажите пож-та, сижу целый день не могу разобраться.
Собственно проблема - есть два блока с разной высотой контента, и мне нужно, чтобы ссылки в этих блоках были на одинаковом уровне в любом случае. Я решил мерять позицию 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/

Ничего подобного. При 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>