CSS position: relative help

Hello,

I've been having some problems with a div which I want to 'float' (not the css property float) sort of 'over' the actual site. Here's the site;

http://tostidee.nl/v1public/template.htm

It's the right image with 'Populair Tostideetje!' in it (div id='tostideetje' in the html). Currently it's positioned the way I want it, but because of the 'bottom: 140px' code I used, the 140 pixels under the div aren't accessible, which is why the jibberish text under it is so much lower. I could reposition that div using 'bottom=140px' as well, but then the problem would still exist only now under that div.

How could I get the effect I want (have that 'tostideetje' going out of the site' bounds) without messing other stuff up?

Try
#inside_right {/*css.css (line 110)*/
background-color:#FEDD4F;
float:left;
position:relative;
width:157px;
}
#tostideetje {/*css.css (line 9)*/
background-image:url(./img/tostideetje.png);
bottom:140px;
height:309px;
left:-20px;
position:absolute;
top:0;
width:275px;
z-index:1;
}

btw, I think an img would be more semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) for that one instead the currently set background image.

PS: You'd need to use a faux column method (http://www.alistapart.com/articles/fauxcolumns/) if you need to expand that yellow box to touch your footer

Great, thanks. For some reason I always understood 'position: absolute' wrong apparently. I always thought it placed the div at (0, 0) in the body, not the parent div.

Your link to the semantic coding page isn't working. I tried to look for the article myself but couldn't find. Do you have a working link?

And thanks for the tip on expanding the right column. I still needed to look into that.

Oops! They seems to have used a mod_rewrite to hide the .html part, but didn't add any permanent redirects. :eek:

Check http://boagworld.com/technology/semantic-code-what-why-how now.

PS: You might be interested to see http://www.bonrouge.com/3c-hf-fixed.php, a good 3 column fixed layout with out any box model issues (of IE) (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)

I always thought it placed the div at (0, 0) in the body, not the parent div. The position of an absolutely positioned element is calculated with respect to the boundaries of its relatively positioned immediate parent. That's why I assigned position:relative; to #inside_right.