Clearfix with absolute positioned elements

Question

My problem is this:
A border does not carry contained elements. I know this because I position the content element as absolute, but I need them to be absolute for the layout to work. It also means that I cannot use the clearfix solution (this means that I have to float elements, which is not an option).
So my question is how to get the parent div to get the height of the contained elements.

EDIT: No Javascript solution, only 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

set one element to float:left and the other to position:absolute; right:0 position:absolute; right:0 and use clearfix .

Answer 2

Change position: absolute; from .content-item to position: relative; and give it float: left; . Delete #content-1 and #content-2 , you no longer need them. And finally add a new class to your html (after 2 #content id) and add clear: both; to this class in your stylish set.

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