obtain height to position a div in absolute mode

StackOverflow https://stackoverflow.com/questions/940428

Question

as my last question was answered inmediatly.. i decided to post a new one which is taking all my hair away, XD

this is the problem..

i have a design with an absolute positioned div.. which has a transparent png and a simple anchor... just like this.

<div class="buyfloat">
      <img src="img/buy.png" />
</div>

so.. i need this div.buyfloat positioned at an absolute position... not moving around.. no jumping no fading.. i just need it at 200px from the very bottom of the page... because i need it just on the top of my footer.. and as the heigh of the pages increases or decreases.. i can´t use top selector.

well.. "use bottom!" you may say.. yes sir i tried.. but for some kind of reason.. the bottom selector uses the window height (visible part) instead the whole thing.. and.. if i scroll the page down.. the image is right in the middle of the page.

.buyfloat{
    width:333px;
    height:135px;
    position:absolute;
    left:10px;
    bottom:200px; /**   not working         **/
    margin:5px auto 0 auto;
    z-index:99;
}

i'm looking for some javascript (i think i saw one sometime ago) that gives me the body height right on the css.. but if you have any different and easier solution.. i'm all ears!

thanks in advance.

Was it helpful?

Solution

Bear in mind that "position: absolute" is actually relative to the first ancestor of the element that has a position value other than "static" (see point 4 in http://www.w3.org/TR/CSS2/visudet.html#containing-block-details). So maybe you have this situation and the "bottom" is measuring from some other element rather than html/body.

OTHER TIPS

First off, the only way JS works in CSS is via "expression" which is IE only, secondly this would require your users also had JS turned on.

pos:abs removes the element from normal layout and places it with respect to the nearest absolute or relative parent. If you're in strict or transitional xhtml, bottom will absolutely work if you just make the body relative too:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        body {height: 9000px;position:relative;}
        #a {position:absolute; bottom:0px;}
        </style>
    </head>
    <body>
    <div id="a">bottomDweller</div>
    </body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top