Question

I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.

The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element’s position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?

The HTML looks like:

div class="container">
    <div class="homePage">
        <!-- some content -->
    </div>
    <div class="paperOverlay" style="position: relative; top: -70px;">
        <!-- some more content -->
    </div>
</div>

And the CSS looks like:

div.container 
{ 
    width: 960px;
    margin: 0 auto;
}

div.homePage 
{ 
    width: 800px;
    height: 500px;
}

div.paperOverlay
{
    width: 960px;
    min-height: 400px;
    background: url('Images/Overlay.png') no-repeat top center;
}

Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.

Answer 1

Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?