Clearfix con elementi posizionati assoluti

Question

Il mio problema è il seguente:
Il bordo non avvolge gli articoli contenenti. Lo so perché posiziono il contenuto-item in assoluto, ma ho bisogno che siano assoluti affinché il layout funzioni. Questo significa anche che non posso usare la soluzione di clearfix (questo significa che devo flottare gli elementi, che non è un'opzione).
Quindi la mia domanda è: come ottenere il genitore div per ottenere l'altezza degli elementi contenuti.

EDIT: Soluzione No Javascript, CSS solo

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; 
} 

Answer 1

impostato un elemento da float:left e l'altro per position:absolute; right:0 e utilizzare un clearfix.

Answer 2

Modificare il position: absolute; di .content-item-position: relative; e dargli un float: left;. Rimuovi #content-1 e #content-2, non ne hai più bisogno. Infine, inserisci una nuova classe nel tuo html (dopo gli ID 2 #content) e aggiungi un clear: both; a quella classe nella tua cartella stili.

Esempio: http://jsfiddle.net/skeurentjes/xLTJp/1/