Home/ Questions/Q 8644781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T12:23:04+00:00

Consider the following DIV structure: <style> #content{float:left;width:100%;} #overlay{position:absolute;z-index:100;} </style> <body> <div id=header>header</div> <div id=overlayBox>

  • 0

Consider the following DIV structure:

<style>
#content{float:left;width:100%;}
#overlay{position:absolute;z-index:100;}
</style>

<body>
    <div id="header">header</div>
    <div id="overlayBox">
        <div id="overlay">
            I want to overlay #content. 
            If my height is greater than
            #content, I don't want to 
            spill onto other elements. 
            I want to push them away.
        </div>
    </div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</body>

In the example I want to:

Push #header and #footer away if #overlay becomes greater height than #content

Even if this DIV structure is completely wrong, it’s only being used to illustrate the need.

This is a good example of the problem I am having:
http://jsfiddle.net/Udqkc/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, moved #content into #overlayBox: 

        <div id="overlayBox">
        <div id="overlay">
            I want to overlay #content. 
            If my height is greater than
            #content, I don't want to <br />
            spill onto other elements. <br />
            I want to push them away.
        </div>
        <div id="content">content</div>
    </div>

    Slightly changed CSS:

    #overlay {float:left;}
#overlayBox {overflow:hidden;}
#content {position:absolute;}​

    Working example – http://jsfiddle.net/nKwQF/14/

    Hope this helped, cos I’m not sure if you’re able to move #content

    • 0