Clearfix с абсолютно позиционированными элементами
Моя проблема заключается в следующем:
Граница не переносит содержащие элементы. Я знаю, что это потому, что я позиционирую абсолютные элементы контента, но мне нужно, чтобы они были абсолютными для работы макета. Это также означает, что я не могу использовать решение clearfix (это означает, что я должен перемещать элементы, что не является опцией).
Итак, мой вопрос, как мне получить родительский div, чтобы получить высоту содержащихся элементов.
РЕДАКТИРОВАТЬ: Нет Javascript решение, только CSS
Html:
<div class="mask">
<div id="content-1" class="content-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
<div id="content-2" class="content-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>
CSS:
.mask{
position:relative;
width:800px;
border: 1px solid black;
}
.content-item{
position: absolute;
width:300px;
}
#content-1{
left:10px;
}
#content-2{
left: 300px;
}