Question

I am trying to use the ‘position: relative;’ ‘position: absolute; bottom: 0;’ thing to stick a div to the bottom of the page, but it keeps hanging right under the lowest visible element within the container. I tried changing ‘height’ and ‘min-height’ properties for relevant divs but never got it to work properly. it either disappears or places itself below all containers (including the footer) just sitting on plain background, or just hangs right under lowest element in the container.

here’s my CSS:

#body {
   padding-bottom:40px;   /* Height of the footer */
    padding-top: 200px;
    position: relative;
}

.sink{
    padding: 10px;
    position: absolute;
    bottom: 0;
}

.sink is the class of the div I need to stick to the bottom.

div with id body is contained within div with id container, which is contained withing html body:

body {
   margin:0;
   padding:0;
   height:100%;
    background: #7092BE;
    background-image: url("bg1.png");
    background-attachment: fixed;
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
}

#container {
   min-height:100%;
   position:relative;
    width: 900px;
    margin: 0 auto;
    background: white;
    padding: 0;
}

I hope I copied all the necessary info, tell me if not please.

Answer 1

Found the answer – I gave the div right above ‘sink’ (and not the one containing it) the ‘position: relative;’ and it worked. Thanks to everyone.