Footer is not properly position

Discussion in 'CSS' started by Creative_illusion, Nov 6, 2011.

  1. #1
    Good morning everyone,

    I need an advice, I have a weird encounter in regards of footer area. I don't know exactly why my footer area appears right close to my header? and it has a bottom scroll bar while I declare the width to 100%? I would like the footer to be cemented to the bottom of the browser window regardless of the amount of content. yet not cause a conflict with long page?

    Can anyone help me on this. Thanks.

    Here is the Demo Link

    Thanks in advance.
     
    Solved! View solution.
    Last edited: Nov 6, 2011
    Creative_illusion, Nov 6, 2011 IP
  2. ademmeda

    ademmeda Active Member

    Messages:
    354
    Likes Received:
    3
    Best Answers:
    3
    Trophy Points:
    70
    #2
    Some of the divisions are not structured properly. For example, wraper and page are not closed. sidebar is inside twit division. I am not sure if this is the cause though.
     
    ademmeda, Nov 6, 2011 IP
  3. #3
    You can try this:
    1) Open footer.php

    2) Add following code before the footer codes starts.
    
    <div style="clear: both;"></div>
    
    Code (markup):
    3) save footer.php
     
    aap, Nov 6, 2011 IP
  4. pobex

    pobex Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    add display:table in #footer

    #footer{ background-image: url(images/footerbg.jpg); background-repeat: repeat-x; background-position: top; position: absolute; left:0px; padding: 20px; height:30px; width:100%; color: #fd8103; font-weight: normal; text-align: right; display:table; }

    or set the width + border + padding + margin = 100% of screan

    #footer{ background-image: url(images/footerbg.jpg); background-repeat: repeat-x; background-position: top; position: absolute; left:0px; padding: 5%; height:30px; width:90%; color: #fd8103; font-weight: normal; text-align: right; }

     
    pobex, Dec 8, 2011 IP
  5. leanocodes

    leanocodes Member

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    I think you have to clear the floated div's you have declared. I faced those problems before.
     
    leanocodes, Dec 10, 2011 IP