Bottom-Margin with varying content height

Question

Hi, I have a problem I have been trying to solve, but without any progress.

This is a summary of my code:

<div id="container">
     <div id ="content">
          Some content here (Varying height)
     </div>
</div>

body {
     background-image: url('img/bg_Body.gif');
     margin:0px 0px 0px 0px;
}

#container {
    position: relative;
    width: 880px;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    min-height: 100%;
}

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('img/faux_tile.png');
    min-height: 200px;
    padding-top: 105px;
    padding-right: 80px;
    min-width: 400px;
    padding-left: 80px;
    padding-bottom: 110px;
}

How do I add a margin between the content and the end of the page? The faux_tile.png covers to the end of the page, I want a margin between the end of the page and the faux_tile.png, which is a small margin showing bg_Body.gif.

Please help me, it is greatly appreciated. Thanks!

Answer 1

You could give body a margin-bottom.

That should force a margin even though your container is position: absolute.

Answer 2

try this:

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    right:0;
    bottom:20px; /*this should give you 20px margin at the bottom*/
    background-image: url('img/faux_tile.png');
    min-height: 200px;
    padding-top: 105px;
    padding-right: 80px;
    min-width: 400px;
    padding-left: 80px;
    padding-bottom: 110px;
}

the other way could be to give #container a min-height of less than 100%