Clearfix mit absolut positionierten Elementen

Question

Mein Problem ist folgendes:
Der Rahmen umschließt die enthaltenen Elemente nicht. Ich weiß, das liegt daran, dass ich das Inhaltselement absolut positioniere, aber ich brauche es absolut, damit das Layout funktioniert. Das bedeutet auch, dass ich die Clearfix-Lösung nicht verwenden kann (das bedeutet, dass ich die Elemente floaten muss, was keine Option ist).
Also meine Frage ist, wie bekomme ich die Eltern div, um die Höhe der enthaltenen Elemente zu bekommen.

EDIT: Keine Javascript Lösung, CSS nur

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

gesetzt einen Einzelteil float:left und die andere an position:absolute; right:0 und ein clearfix verwenden.

Answer 2

Ändern der position: absolute; von .content-item-position: relative; und geben Sie eine float: left;. Entfernen Sie #content-1 und #content-2, Sie brauchen sie nicht mehr. Und schließlich fügen Sie eine neue Klasse in Ihren HTML-Code (nach der 2 #content IDs) und fügen Sie eine clear: both; zu dieser Klasse in Ihrem Stylesheet.

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