Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding whitespace at bottom of HTML page

Tags:

html

css

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?

like image 230
Jono_2007 Avatar asked May 30 '12 11:05

Jono_2007


1 Answers

I've found this to be effective:

body {
    padding-bottom: 50px;
}
like image 51
lackita Avatar answered Sep 18 '22 06:09

lackita