絶対配置要素を含むClearfix

Question

私の問題は次のとおりです。
境界線が含まれているアイテムをラップしません。私はコンテンツアイテムを絶対的な位置に置いているので、これが分かっていますが、レイアウトが機能するためには絶対的なものである必要があります。これはまた、私はclearfixソリューションを使用できないことを意味します（これは、オプションではない要素を浮動させる必要があることを意味します）。
私の質問は、含まれている要素の高さを得るために親divを取得する方法です。

EDIT：いいえ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; 
} 

Answer 1

はfloat:left 1つの項目を設定し、他のposition:absolute; right:0およびclearfixを使用します。

Answer 2

変更から.content-itemのとし、float: left;とします。 #content-1と#content-2を削除すると、もう不要です。そして、最後にあなたのhtmlに新しいクラスを挿入して（2 #content idの後に）、clear: both;をあなたのスタイルチェットのそのクラスに追加してください。

例：

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