Css - верхний элемент, проходящий мимо родительского элемента

Я использую атрибут top, чтобы div начинался в верхней части его родителя и заканчивался внизу. Нижняя часть работает. По какой-то причине, однако, вершина начинается с двух родителей назад. Вот мой код:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
    <div class="boxx details-coursework">
        <div class="boxx-content custom-scroll">
            Box content goes here
        </div>
    </div>
</div>

Вот css:

.details-coursework .boxx-content { padding: 0 0 0 0!important;  position: absolute; 
  bottom:0;  top: 0;  }

Так как top: 0, '.details-coursework.boxx-content' должен начинаться в верхней части 'boxx details-coursework'. Проблема в том, что ".details-coursework.boxx-content" начинается с класса = справа. его родительский элемент - это "boxx details-coursework", поэтому для этого должен быть установлен верх. Как это исправить?

Вот еще один css для boxx, но я не думаю, что это релевантно:

.boxx { margin-top:11px;  }
.boxx:first-child { margin-top:0;  }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7; 
  font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px;     }

Вот jsfiddle. Я включил еще один код, поэтому было бы более понятно, что я пытаюсь сделать. Посмотрите на нижний правый блок, чтобы увидеть, что я пытаюсь сделать:

http://jsfiddle.net/3ycGZ/