absolute position

Hi there:

I don't know why positioning (absolute and relative) have this effect on a div.

In the illustration below I show the two cases:

http://s29.postimg.org/ly56k57t3/Sin_t_tulo.png
The inner div shortens when its position is absolute, why?

Thanks in advance

Rafael

//mod edit: image link fixed ~gt

I have the below HTML in this fiddle http://jsfiddle.net/v6E9a/ .The issue is that the footer is overlapping with the body.If I change the body position to relative then it all lines up correctly but I need to have absolute there to support some other functionality.

I m really not that good with CSS.Can someone please have a look at the html and tell me how i can line the head body and footer correctly.

<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
    <div id="s4-bodyContainer" style="position:relative">   

hello all!
im having trouble building the right menu i need, its a jquery lavalamp, with 3 level dropdown submenus,

ive found a lot of open source code out there but none really matched my needs, ive started modifying some of them but i always run into some problems.

im getting very close using the code found here http://premiumcoding.com/jquery-dropdown-lavalamp-menu/

ive improved it if anyone is interested in using my version.

ive fixed the anoying queuing of dropdowns,

All -

For some reason, my absolutely positioned

I am attempting to rewrite an e-commerce site. One of the design specifications is that links to different product categories need to be precisely laid out on the page. For some reason, setting the top and left attributes with absolute positioning doesn't work. If I set the position to absolute / top=0 left = 0 the content appears about midway down the page in the correct "Left" position.