Clearfix with absolute positioned elements
Solution 1
set one item to float:left
and the other to position:absolute; right:0
and use a clearfix
.
Solution 2
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/
Rick Hoving
Updated on February 04, 2020Comments
-
Rick Hoving over 4 years
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; }
-
SKeurentjes over 11 yearsSorry, forgot that you can't use position: relative;, my code is useless now
-
theorise over 9 yearsThis will only work if the floated element has a greater height than the one with the fixed position.
-
zehata about 6 yearsAlso works with more than 2 items, just put 1 of them as float:left and the rest position:absolute