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

css

Solution

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

or

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

It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work

Problem

I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in. I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it. I've tried adding: ``` margin-bottom: 50px; padding-bottom: 50px; ``` to the div containing the top page content, but it doesn't work. Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/

Original source