Footer not staying bottom of the page

Discussion in 'CSS' started by tmekt, Jun 1, 2010.

0
  1. #1
    I have a footer which should be in the bottom the page (below of every div), however it doesn't work. Footer doesn't move along with other divs when I'm adding content on the div "keski".

    Page:

    
<body>
    <div id="ylayla">
        ylayla
    </div>

    <div id="ylaala">
        ylaala
    </div>

    <div id="vasen">
        vasen

        <div id="vasenmainos">
            vasenmainos
        </div>

        <div id="vasensisalto">
            vasensisalto
        </div>
    </div>

    <div id="keski">
        keski
    </div>

    <div id="oikea">
        oikea
    </div>

   <div id="footer">
        ala
    </div>
</body>
    HTML:
    CSS:

    
div#ylayla {
    background-color: #999967;
    position: relative;
    height: 160px;
}
div#ylaala {
    position: relative;
    height: 40px;
    background-color: #666666;
}
div#vasen {
    position:  relative;
    float: left;
    width: 200px;
    margin-bottom: 40px;
}
div#keski {
    position: absolute;
    padding-left: 210px;
    min-height: 100%;
    margin-bottom: 40px
}
div#oikea {
    top: 0;
    right: 0;
    float: right;
    width: 200px;
    margin-bottom: 40px;
}
div#footer {
    border-top: dotted #CCCCCC;
    border-top-width: thin;
    width: 100%;
    bottom: 0;
    position: absolute;
}
    HTML:
     
    tmekt, Jun 1, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What type of layout do you want? It looks like you want two fixed sidebars and a fluid center column. Also, do you want a regular footer or a sticky footer?
     
    Cash Nebula, Jun 1, 2010 IP
  3. tmekt

    tmekt Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes. Two fixed sidebars and center column which has the content.

    I want regular footer which would stay below of other divs.
     
    tmekt, Jun 1, 2010 IP
  4. extremephp

    extremephp Peon

    Messages:
    1,290
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Share your URL mate, That would make the work easy since we can have some Live tool to figure out the CSS and HTML Structure and can check out how the changes would be :|

    Thanks.
     
    extremephp, Jun 1, 2010 IP
  5. tmekt

    tmekt Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I would of course but since I'm developing this locally, it's kinda difficult to share any urls.

    Besides I already provided all the code I currently have. Removed some paragraphs and the head section, though.
     
    tmekt, Jun 1, 2010 IP
  6. extremephp

    extremephp Peon

    Messages:
    1,290
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Just try making the footer position from Absolute to Relative, Cant help much without getting the live site :(

    Try it and make us know.

    Thanks.
     
    extremephp, Jun 1, 2010 IP
  7. tmekt

    tmekt Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Didn't work.

    Just to be clear, I want a footer similar to this site (first example I found):
    http://www.aanitarha.com/
     
    tmekt, Jun 2, 2010 IP
  8. Wtfuxbbq

    Wtfuxbbq Peon

    Messages:
    61
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Last edited: Jun 2, 2010
    Wtfuxbbq, Jun 2, 2010 IP
  9. tmekt

    tmekt Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    tmekt, Jun 3, 2010 IP