6 Replies - 843 Views - Last Post: 29 November 2014 - 01:57 PM

#1 AndreMac96   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 09-October 14

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

Posted 29 November 2014 - 07:23 AM

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;}
}




Is This A Good Question/Topic? 0
  • +

Replies To: My "footer" doesn't appear at the foot of the page ?

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: My "footer" doesn't appear at the foot of the page ?

Posted 29 November 2014 - 10:10 AM

You'll need to post some HTML as well.

Looking at your CSS though, what are you attempting to keep the footer at the bottom? I assume you mean the bottom of the viewport? Otherwise, it will appear after other content, in the document order.

A CSS Sticky Footer that just works
Was This Post Helpful? 1
  • +
  • -

#3 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: My "footer" doesn't appear at the foot of the page ?

Posted 29 November 2014 - 11:26 AM

Just FYI, while HTML5 added in the header, nav, and footer tag elements, that does not mean that they are predesignated to display a certain way.
Was This Post Helpful? 1
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: My "footer" doesn't appear at the foot of the page ?

Posted 29 November 2014 - 11:30 AM

View Postastonecipher, on 29 November 2014 - 06:26 PM, said:

Just FYI, while HTML5 added in the header, nav, and footer tag elements, that does not mean that they are predesignated to display a certain way.

That did occur to me as well ;) that the OP might think that using a footer-tag would cause it to jump to the bottom.
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: My "footer" doesn't appear at the foot of the page ?

Posted 29 November 2014 - 11:32 AM

The sticky footer is a great way to handle the issue. It keeps the content from having to push it down.
Was This Post Helpful? 0
  • +
  • -

#6 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3150
  • View blog
  • Posts: 11,954
  • Joined: 03-December 12

Re: My "footer" doesn't appear at the foot of the page ?

Posted 29 November 2014 - 11:41 AM

You have a footer tag, or a tag with the id of footer? Based on the CSS, it is an id name.
Was This Post Helpful? 0
  • +
  • -

#7 AndreMac96   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 09-October 14

Re: My "footer" doesn't appear at the foot of the page ?

Posted 29 November 2014 - 01:57 PM

Got it working in the end

Changed my footer to this
#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



And i had to change my position to relative in the main section
#main
{
position:relative;
height:100%;
background:#666;
}


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1