Creating a page footer div?

Question 1

If you set the footer to position: fixed, it will appear above your content, even if the page is longer than the window.

If what you want is only to keep the footer at the bottom, even when the content is really short, there's that answer : Sticky footer on Stack overflow

That way, your footer will stay at the bottom of the page OR at the end of the content.

Question 2

div {
    background-color:red;
    height:300px;
    position:fixed;
    bottom:0;
    width:100%;
}

Question 3

If you are wanting a sticky footer, then you want to use the css position style fixed

e.g.

div#footer{
    position: fixed;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
}

With this, you would probably also want to set a padding of 300px on the content of the website, so if a user scrolls to the bottom, then they can see the bottom of the content without the footer overlapping it. You would also want to play about with your z-index to make sure nothing is appearing infront of the footer.

Question 4

I created a fiddle for you: http://jsfiddle.net/X9gMD/

This is how the css could look like

.footerDiv{
width:100%;
height:300px;
background-color: yellow;
position: absolute;
bottom:0px;
}

Question 5

JSFiddle: http://jsfiddle.net/Z6HMb/

Simple HTML example:

<div id="footer">This a footer text</div>

CSS

#footer{position:absolute; height:300px; width:100%; bottom: 0%; background-color:red;}

Question 6

Use position fixed(fiddle).

CSS:

body {
    background-color: blue;
    height: 2000px;
}

div {
    background-color: red;
    position: fixed;
    height: 300px;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML:

<body>
    <div>Footer</div>
</body>

Question 7

To fix the footer use position: fixed CSS property. Something like following shall help.

footer.div{
    height:300px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
}

Hope that helps :)