tags:

views:

577

answers:

4

Okay, I know that 1) this is probably not possible with CSS alone and that 2) it really shouldn't be possible.
Unfortunately, I need to find a way to make it possible due to some requirements from the user.

Okay, so some greatly simplified markup:

<html>
<head>
</head>
<body>
<div><!--There's content in here --></div>
<div id="wrapper">
<div style="position: absolute;">Stuff1</div>
<div style="position: absolute;">Stuff2</div>
<div style="position: absolute;">Stuff3</div>
<div style="position: absolute;">Stuff4</div>
</div>
<div><!--There's content in here --></div>
</body>
</html>

It's the divs within #wrapper that I need to clear. Assume they all have top&left positions.

The major obstacle here is that the divs within wrapper are movable. Not only that, but more inner divs can also be added or removed and positioned anywhere.

I was thinking that this may be possible with jQuery... Somehow finding the lowest point within that div and setting the div height to match. I'm working on doing it this way, but am not sure where to start.

Anyone have any ideas?

Solution based on Torgamus' suggested javascript

var maxHeight = 0;
$('#wrapper div').each(function () {
    var tmpHeight = $(this).height() + $(this).position().top;

    if (tmpHeight > maxHeight) {
     maxHeight = tmpHeight;
     $('#wrapper').height(maxHeight);
    }
});
A: 

You shouldn't need to 'clear' an absolutely positioned element. How are the divs being positioned? Maybe you should just position the content div relative to the absolute div so it naturally flows after it.

Maybe stick the content div inside the wrapper, make it relative and then put it after the other divs and it should 'clear'. Try it!

tahdhaze09
I think you misinterpreted Nate's question. I suspect that he meant he wanted other elements on the page to appear below the lowest absolutely positioned element, not that he wanted to apply the clear style directly to those elements. That said, I agree that your statement is true.
Lord Torgamus
My bad. I misinterpreted the question. Hope I didn't offend. And I hope it solved your issue.
tahdhaze09
+2  A: 

Probably the easiest solution would be to use jQuery to get the distance from the top of the page to the #wrapper div and the height and then position your content <div> underneath this. Something like:

$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")
James
A: 

Why can't you position the container absolutely and then make its children relative?

Azeem.Butt
+2  A: 

Based on your comment

Somehow finding the lowest point within that div and setting the div height to match. I'm working on doing it this way, but am not sure where to start.

and your willingness to use jQuery, I whipped something up using JavaScript:

<html>  
<head>  
<title>Clearing abs positions</title>  
<script>  
function setHeight() {
    var height1 = document.getElementById("abs1").style.top;
    height1 = parseInt(height1.substring(0, height1.indexOf("px")));
    height1 += document.getElementById("abs1").offsetHeight;

    var height2 = document.getElementById("abs2").style.top;
    height2 = parseInt(height2.substring(0, height2.indexOf("px")));
    height2 += document.getElementById("abs2").offsetHeight;

    var height3 = document.getElementById("abs3").style.top;
    height3 = parseInt(height3.substring(0, height3.indexOf("px")));
    height3 += document.getElementById("abs3").offsetHeight;

    var height4 = document.getElementById("abs4").style.top;
    height4 = parseInt(height4.substring(0, height4.indexOf("px")));
    height4 += document.getElementById("abs4").offsetHeight;

    var maxVal = Math.max(height1, height2);
    maxVal = Math.max(maxVal, height3);
    maxVal = Math.max(maxVal, height4);

    var wrapper = document.getElementById("wrapper");
    wrapper.style.height = maxVal + "px";
}
</script>
</head>
<body onload="setHeight()">
    <div>
        foo
        <!--There's content in here -->
    </div>
    <div id="wrapper" style="border: 1px solid black;">
        <div id="abs1" style="position: absolute; left: 100px; top: 150px; border: 1px solid red;">
            Stuff1
        </div>
        <div id="abs2" style="position: absolute; left: 200px; top: 250px; border: 1px solid green;">
            Stuff2
        </div>
        <div id="abs3" style="position: absolute; left: 300px; top: 100px; border: 1px solid blue;">
            Stuff3
        </div>
        <div id="abs4" style="position: absolute; left: 400px; top: 450px; border: 1px solid orange;">
            Stuff4
        </div>
    </div>
    <div>
        bar
        <!--There's content in here -->
    </div>
</body>
</html>
Lord Torgamus
This looks extremely promising. I'll tweak it for jquery and test it out.
Nate Wagar
Worked perfectly. Writing jQuery implementation into my initial post.
Nate Wagar
As much as I like rep, if you found jQuery to be more useful, you should probably post your solution as an answer and give that answer the accepted checkmark. You did specify jQuery in your original question, and I just didn't know how to use it.
Lord Torgamus