Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Clearfix with absolute positioned elements

My problem is the following:
The border does not wrap the containing items. I know this is because I position the content-item absolute, but I need them to be absolute for the layout to work. This also means that I cannot use the clearfix solution (this means that I have to float the elements, which it not an option).
So my question is, how to I get the parent div to get the height of the contained elements.

EDIT: No Javascript solution, CSS only

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

like image 780
Rick Hoving Avatar asked Nov 02 '12 11:11

Rick Hoving


People also ask

Does float work with position absolute?

Float right and position absolute doesn't work together.

What does Clearfix hack do?

The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.

What is position absolute in Javascript?

An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)


2 Answers

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

like image 122
Amir Nissim Avatar answered Oct 05 '22 21:10

Amir Nissim


Change the position: absolute; of .content-item to position: relative; and give it a float: left;. Remove #content-1 and #content-2, you don't need them anymore. And at last insert a new class into your html (after the 2 #content id's) and add a clear: both; to that class in your stylescheet.

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

like image 37
SKeurentjes Avatar answered Oct 05 '22 21:10

SKeurentjes