My "footer" doesn't appear at the foot if the page?

Asked Nov 29 '14 at 14:14

Active Nov 29 '14 at 15:02

Viewed 2,489 times

-1

Hi i'm doing the a basic layout and i have a problem with my css. I have a footer tag set, but it doesnt appear at the bottom it appears a the midway point in the page.

Here is my CSS code

My "footer" doesn't appear at the foot if the page ?

I think it might be the height and width i have set but i'm not sure what to set it as prperly.

Thanks in advance

body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}


#social {
float: right;
background-color:black;
}

#social1 {
float:right;
background-color:black;
}

#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}

#header
{

height:100px;
background:#000;
}

#main
{

height:750px;
background:#666;
}


#footer
{
margin-bottom:-50px; 
height:50px; 
background-color:red;}
}

asked Nov 29 '14 at 14:14

You've margin-bottom: -50px, did you notice???? – Bhojendra Rauniyar Nov 29 '14 at 14:17
i think you are facing this problem because of float – swapnil solanke Nov 29 '14 at 14:21
refer this to get a clear idea http://stackoverflow.com/a/689290/3164682 – Sarath Nov 29 '14 at 14:21
possible duplicate of [100% Min Height CSS layout](http://stackoverflow.com/questions/25238/100-min-height-css-layout) – Bram Vanroy Nov 29 '14 at 14:32

3 Answers3

4

Replace the footer with:

#footer
{  position:absolute;
   bottom:0;
   width:100%;
   height:50px;   /* Height of the footer */
   background:#6cf;
background-color:red;}

The tutorial used: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

This is my full CSS:

body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}


#social {
float: right;
background-color:black;
}

#social1 {
float:right;
background-color:black;
}

#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}

#header
{

height:100px;
background:#000;
}

#main
{

height:750px;
background:#666;
}

And this is how i referenced it from the html:

<footer  id ="footer">Some footer text</footer>

I suspect you did not reference it correctly, with the proper id from your div?

edited Nov 29 '14 at 14:57

answered Nov 29 '14 at 14:29

SummerCode

1,403
1
14
28

The footer is still half way up the page. – Nov 29 '14 at 14:37
and i had to declare the main section in a relative position – Nov 29 '14 at 15:03

1

I think I see your problem. In the footer css code you have the following:

#footer
{
margin-bottom:-50px; 
height:50px; 
background-color:red;}
}

Pretty sure the margin-bottom being a negative number is the issue. Change that to 5 or 10 and see if it appears.

answered Nov 29 '14 at 14:17

Jason Rybka

157
2
15

It didnt make a difference. :( – Nov 29 '14 at 14:25
That seemed like it should have worked... check this tutorial and see if that helps out. http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/ – Jason Rybka Nov 29 '14 at 14:49
1

You have two closing brackets. – František Maša Nov 30 '14 at 11:05
Two feet. You make me laugh. @FrantišekMaša – NeoZoom.lua Aug 01 '17 at 21:36

0

i got it thanks for all your help.

i got this from summer codes answer above

#footer
{  position:absolute;
bottom:0;
width:100%;
height:50px;   /* Height of the footer */
background:#6cf;
background-color:red;}

and i had to change the main section to

#main
{
position:relative;
height:100%;
background:#666;
}

answered Nov 29 '14 at 15:02