CSS static margin-bottom below content?
I'm trying to create a 50px space at the bottom of my page below the main content area so that no matter what size the user has text or how much content is inside the page - there is always an intermediate 50px space after the content area, which either the container div ( transparent), or showing the body.
It sounds pretty straightforward and I've been fiddling about setting up margins and padding on my container div and body tag, etc., but I had no luck that it was. Increasing the size or content pushes through whatever space I can create.
Is there a general, clean approach to creating this effect?
source to share
It's hard to tell without seeing the markup, but it could be that your container div isn't clearing its children, which might explain why the margin or padding at the bottom isn't working ...
If you've placed a div inside a container, this could be a problem.
There are several methods for clearing floats - looking for css float clearing for all of them - a quick test is to flush the div with float: none; clear: both; below the other kids and see if it matters.
I often find it helpful to set the background color on the container when it works with this stuff and then remove it when you fix it.
source to share
You can create a div like this:
height: 50px;
width: 100%;
position: fixed;
bottom: 0;
This will just create a 50px tall white square that will never move and is stuck at the bottom of the browser. Is this what you are trying to achieve?
If the content goes through this div, try changing its z-index so that it sits above other elements.
source to share