CSS static margin-bottom below content?

Question

I'm trying to achieve a 50px space at the bottom of my page, below the main content area so that no matter what text size the user is at, or how much content happens to be inside the page - there is always a proceeding 50px space after the content area which will make either the container div(transparent) or body show.

It sounds fairly simple, and I've fiddled about setting margins and padding to my container div and the body tag etc, but I'm having no luck what so ever. The increase in size or content pushes past whatever space I manage to create.

Is there a general, clean approach of producing this effect?

Answer 1

You can create a div like this:

height: 50px;
width: 100%;
position: fixed;
bottom: 0;

That will just create a white box of height 50px that will never move and it stuck at the bottom of the browser. Is this what you are trying to achieve?

If the content is running through this div still, trying changing it's z-index so that it lays above the other elements.

Answer 2

Hard to tell without seeing the markup, but it could be that your container div is not clearing its child elements, which might explain why margin or padding on the bottom is not working...

If you have floated divs inside the container then that could be the problem.

There are a number of techniques for clearing floats - search for css float clearing for all of 'em - a quick test would be to drop in a div with float:none;clear:both; below the other children and see if that makes a difference.
I often find it useful to set a background colour on the container while working this stuff out, then remove it when you get it right.