CODEWITHSUNDEEP
htmlcss
Jono_2007
Jono_2007

Reputation: 1046

Adding whitespace at bottom of HTML page

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?

Upvotes: 18

Views: 50744

Answers (6)

thinkerBOB
thinkerBOB

Reputation: 176

In css give margin-bottom attribute to the container class.

.container{
    margin-bottom:100px;
}

Upvotes: 0

lackita
lackita

Reputation: 514

I've found this to be effective:

body {
    padding-bottom: 50px;
}

Upvotes: 37

Gareth
Gareth

Reputation: 5719

I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.

Upvotes: 0

Holf
Holf

Reputation: 6431

Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.

But be aware this will add to the overall height of the element in question, if you're using this in any calculations.

Upvotes: 0

atmd
atmd

Reputation: 7490

adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css

Upvotes: 2

pjmil
pjmil

Reputation: 2097

margin-bottom moves the whole element, try padding-bottom instead.

Upvotes: 9

Related Questions