How can I put a space at the bottom of my site, so the floating div never overlaps

Question

I found many questions about the stack overflow about getting rid of the space, but I cannot figure out how to insert it.

I have bottom navigation on my site that floats with a page, but if the window is small, the bottom of the page closes. I would like to insert some free space at the bottom, so when the window is less than the length of the page, you can still read it.

I tried adding:

margin-bottom: 50px;
padding-bottom: 50px;

in a div containing the contents of the top page, but it does not work.

Is there something I am missing? Here's a demo: http://www.writingprompts.net/name-generator/

Answer 1

#left, #right { 
    margin-bottom: 90px; 
}

or

#top_section > div { 
    margin-bottom: 90px; 
}

#top_section, , div, , css ' WILL work

Answer 2

:

#top_section {
    overflow: hidden;
    padding-bottom: 90px;
}

#top_section , .

Answer 3

http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, not representing what your layout looks like (I'm not going to assume that the demo is yours ... unless you review and tell me what it is), I I will show you how I will do it.

HTML

<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
    <div class="inner-content"> <!-- content inner, where your content goes! -->
    content
    </div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>

CSS

​html,body,.container {
 height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}

.content {
 height: 100%; // see above... i need to cascade down.
 background-color: green;
}
.content-inner {
 padding-bottom: 100px; // offset for the footer.
}
.footer { 
 width: 100%;
 position: absolute; // stick me to the bottom.
 bottom: 0;
 height: 100px;
 background-color: red;   
}

enjoy it!   

Answer 4

To achieve this, you need to use a fixed position in CSS.

HTML:

<div id="top-section">
     Insert content here...
</div>
<div id="bottom-nav">
     <div id="content">
       Bottom content...
     </div>
</div>

CSS

#bottom-nav {
  bottom: 0;
  position: fixed;
  width: 100%;
}

#content {
  margin: 0 auto;
  width: 960px;
}