Question on Position absolute, 100% height and the divs below that element

I have code like this:

<div id="container">
    <div id="has-100-percent-height">
        This div is positioned absolutely and display is none. 
        Overflow auto, too. There are many of these divs within "container"
    </div>
</div>

<div id="the-div-below">
     stuf开发者_Go百科f
</div>

When a user clicks a certain link, the "100 percent height" div is to slide down using. What's been happening is that it does slide down, but it doesn't push the div-below down. You can see the content merely display above "the-div-below" and after it slides down, it quickly disappears.

Anyone know what could be going on? This is in firefox 4. I haven't tested other browsers

Thanks for the help!

Is the CSS for your HTML already set in stone? As others have said an absolutely positioned element is outside of normal flow therefore cannot affect the position of any other element. If you can remove the position:absolute from the #inner then the solution is very simple (and just normal browser re-flowing) - see this demo.

However if you need to keep the absolute positioning you will have to push #below down manually, i.e. JavaScript - see this demo.

Hope it helps.

The reason "the-div-below" is not pushed down is that things that are absolutely positioned don't affect layout of anything else on the page. That's the whole point of absolute positioning.

So to make things work as you want you need to position your "100 percent height" div either statically or relatively.

The remaining question is how to achieve the layout you want, since presumably there's a reason that you were using absolute positioning?

You could add a padding/margin top to the #the-div-below that is equal with the 100% height element.