Make div stick to the bottom of container div

Question

I'd like a div (#menu) to be fixed with its bottom edge to the bottom edge of its container (#cont). Normally this is easy with absolute positioning, but I want #cont to stretch to the size of #menu. Then why does it matter if it sticks to the top or bottom, you wonder?

I use the jQuery slideUp effect which vertically shrinks #cont in an animation. While this happens, I'd like to see #menu move up, instead of the bottom edge of the container just being pulled over it like a blanket. However, by default overflow is cut off at the bottom.

It's for the menus on iceforge.net. Check them if you don't yet get what I mean.

---

I've worked something out, though it's a bit an ugly hack. #menu remains a normally positioned element. On document ready I use Javascript to make it absolutely positioned. To prevent #cont from collapsing, I add an empty div to it with the height of #menu.

It can be seen on the page I linked.

Answer 1

Have you tried making the container div "position: relative"? If you do that, then you can absolutely-position the menu div at the bottom of the container.

[edit] ah ok I re-read your note and now I think I understand it better. Well if it were me I'd still try using "position: relative" on the container, though I have a hunch that IE will cause you grief. Maybe not though. Also I'm not sure whether "overflow: hidden" will stretch the container around the menu.

Answer 2

This should work.

#cont {
    width: 200px;
    border: 2px solid blue;
    position: relative;
    clip: auto; overflow: hidden;
}
#menu {
    width: 200px;
    background: orange;
    position: relative; 
}

$('#menu').click(function() {
    var theHeight = $(this).height();
    $(this).animate({top:-theHeight}, 500).parent().animate({height: 0}, 500);
});

<div id="cont">
        <div id="menu">
            the menu div
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
            <br />content
        </div>
 </div>