Position DIV below fixed div with variable height

Question

Here is the Problem: Lets say I have something like this:

<div id="leftcontainer">
    <div id="top" style="position:fixed"></div>
    <div id="below"></div>
</div>

And I would like to have the #below div, below the #top div, but not use margin-top, since the #top div will have different sizes. Also, the #below div can vary in size, and should scroll beneath the #top div.

Does anybody have an idea how to realize that? Greets - Chris

Answer 1

This is fairly simple with jQuery if the top div's height is fixed after the page renders.

$(document).ready(function() {
    $('#below').css('top', $('#top').outerHeight());
});

That will assign the css top property of the below element equal to the full height of the top element. Other layout factors may cause that to not be the correct value for top, in which case you'll have to determine the correct way to identify the top value, but the principal is the same and in the simple case, this will work without modification.

Answer 2

This is the same answer as @hemp, just with the addition of the div constantly updating it's position, by putting the jquery-css inside a function that runs when you resize.

    $(document).ready(function() {
        function SomeFunction() {
            $('#below').css('top', $('#top').outerHeight());
        }
        window.onresize = SomeFunction;
    });