[Blackex]

<div id="ruta" style="width:500px;height:200px"><p>lite innehåll och ibland mycket innehåll</p><div id="fot">min footer som alltid syns och ligger längst ner</div></div>

Jag har en div "ruta" som är 500x200 pixlar. I den finns det en del innehåll. Nu vill jag lägga in en footer "fot" i rutan.

Mitt problem är att jag vill att "fot" skall ligga längst ner oavsett innehållet i "ruta". Dessutom vill jag att innehållet i "ruta" aldrig får överlappa "fot". "fot" skall alltså alltid synas och hålla sig inom ramarna för "ruta". dessutom har inte "fot" någon fast höjd utan höjden skall bero på storleken på texten (vilket så småningom skall kunna ändras av användaren).

Egentligen vill jag alltså ha en vanlig footer, förutom att den inte skall ligga längst ner i fönstret utan i stället längst ner i en div. Samt att den alltid skall synas (antar att detta sker med z-index)

Finns det något css proffs här som kan hjälpa mig en liten bit på väg?

[princip]

<div id="ruta" style="position:relative;min-height:100%;width:500px;height:200px"><p>lite innehåll och ibland mycket innehåll</p>
<div id="fot" style="position:absolute;bottom:0;">min footer som alltid syns och ligger längst ner</div>
</div>

Borde fungera, men förstås borde allt ligga i ett externt stylesheet istället. <_<