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;
}
Float right and position absolute doesn't work together.
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.
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.)
set one item to float:left
and the other to position:absolute; right:0
and use a clearfix
.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With