Adding whitespace at bottom of HTML page

css, html

Solution

I've found this to be effective:

body {
    padding-bottom: 50px;
}

Problem

I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom. This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content. I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page. I have tried to add a `margin-bottom` css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a `margin-top` css property but not for the bottom. This is the main structure to my website, without content: ``` <html> <head> </head> <body> <div class="CONTAINER"> <div class="PAGENAVBAR"> </div> <div class='CATEGORYNAVBAR'> </div> <div class='PAGE_CONTENT'> <div class="LEFTCONTAINER"> </div> <div class="RIGHTCONTAINER"> </div> </div> <div class="PAGEFOOTER"> </div> </div> </body> ``` Can someone please suggest a method to achieve this effect?

Original source