0

So I am currently trying to position a div at the bottom page for a footer, and it seems that I have this reoccurring problem when it comes to me using CSS. Every once in a while, I will run into an issue where no matter what positioning code I try to apply to a div/element, it just will not work. I tried multiple computers, different programs etc to figure out if it was a problem with that, but I narrowed it down to just simply bad code but I can not figure out what it is.

Here is the CSS section:

#footer{
    height:200px;
    width:1600px;
    border: 5px solid orange;
    background-color:white;
    position:absolute;
    padding-top:800px;

}
Sl0thzy
  • 37
  • 2
  • 11

3 Answers3

1

From what I can make out, you are finding difficulty in positioning your footer at the bottom across different screen dimensions or on resize of the window.

Please refer to this MDN reference on positioning.

position can be one of static, relative, absolute or fixed. Adding positioning (other than static, which is the default) automatically allows you access to the properties top, bottom, left, right and z-index.

The type of positioning used determine the rendering of boxes. static renders elements in document order, relative renders like static, but the elements can be positioned and leave gaps in the original layout if shifted. absolute and fixed does not leave any gaps and are skipped while calculating dimensions for the document layout.

The following properties are significant for your CSS rule to work in getting a fixed footer.

  1. position: absolute or fixed
  2. left:0
  3. bottom:0

jsfiddle

footer{
    height:50px;
  
    /*width:1600px;*/
    width:100%; /* Converted to fluid width */
  
    /*border: 5px solid orange;*/
    border-top: 5px solid orange; /* all around border triggers horizontal scrollbar. So use only top border*/
  
    background-color:white;
  
    position:absolute; /*or fixed*/
  
    /*padding-top:800px;*/ /* padding only adds space inside the box. so remove*/
  
    bottom:0; /* position the footer at the absolute bottom of the page*/
    left:0; /*position the footer to the absolute left of the page*/
}
<div id="contentPage">
  <header>
    <div>This is my header</div>
  </header>
  <section>
    <div>Content section</div>
  </section>
  <footer>
    <p>This is my footer</p>
  </footer>
</div>
santon
  • 1,654
  • 16
  • 26
1

I'm kind of new to web developing. But the CSS code you are showing, looks pretty fine to me. I guess that maybe you have the same problem I had some days ago:

HERE COMES THE RELEVANT PART:

When you use # in CSS, it is to define the properties of a div identified with an id in HTML, and if you identify your div with class,then you should use . before the name. If you use it otherwise it will simply not work. And for predefined div types (example: footer, header, etc, no token is needed.

MAKING IT SHORT:

Use . token in CSS for a div identified by class in HTML.

Use # token in CSS for a div identified by id in HTML.

For predefined div types (headers, footers, etc) , you use no token.

EXAMPLE:

HTML:

<div class="box1">"bla bla bla"</div>
<div id="box2">"more bla bla"</div>
<h1>bla bla title</h1>

CSS:

.box1 {color: blue;}
#box2 {color: red;}
 h1 {color:green;}

I hope that if your problem is something related to this, this answer could help you.

Ffff
  • 73
  • 1
  • 3
  • 14
  • Thanks for offering to help! Sadly I do have that part set up correclty as things only stopped working once I started to get into positioning. – Sl0thzy Oct 17 '15 at 13:24
  • @Sl0thzy . :) Something tells me that I can help you... (or maybe somebody else here can). But **we need some more information about what is the behaviour of this especific div. Is it getting a wrong position?, a wrong size? it doesn't show at all? Some info about the div containing it,maybe**. Try boo be as especific as you can. That would help us to help you, Personally I would be really glad to help. – Ffff Oct 17 '15 at 14:41
  • Sorry haha I thought I covered it. It is essentially just not reacting to the positions I am trying to give it, or when it does, does not do what it was told to do. It is simply just supposed to be at the bottom of the page to act as a sort of picture frame for the footer. – Sl0thzy Oct 19 '15 at 13:10
0

If you want the footer div to float in the bottom of the page, then you have to set: position: fixed bottom: 0 and remove the top property

Now, if you want the footer to be in the bottom of the body (scrolling at the end of the page), then nothing is needed since DIVs are always ordered one bellow each other by default.

I hope I have helped you :)

Jistycs
  • 11
  • 5