výška divu větší než 100% :)

Zdravím všechny! Mám menší CSS problém... Potřebovala bych natáhnou jeden vnější div tak, aby byl vyskoký jako obsah celé stránky. Ne tedy pouze tak, jaká je výška okna prohlížeče. Měl by se natahovat podle toho, jak dlouhý je obsah v menších divech vnořených uvnitř tohoto velkého divu. Netuším, proč se mu do toho nechce:( Pokud je stránka vetší než výška okna a musí se scrollovat, při scrollování se ten vnější div už nenatáhne, a pod tou odscrollovanou částí obsahu už není... Nemáte s něčím podobným zkušenosti?
Tam musí být nějaká zrada, nejspíš floaty, ukaž když tak příklad...
Floaty tam snad ani nemám... No je to těžký vyznat se v mým kódu, ta základní kostra vypadá takhle.
Umázla jsem věci jako background, color, font-family pro přehlednost.

CSS:

html {
height: 100%;
}

body {
text-align: center;
height: 100%;
}

div#page {
position: relative;
width: 760px;
height: 100%;
margin: auto;
border-left: 1px solid white;
border-right: 1px solid white;
z-index: 1;
}

/* hlavicka */
div#header {
position: absolute;
top: 0px;
left: 0px;
height: 250px;
width: 750px;
}

/* menu */
div#menu {
width: 526px;
height: 64px;
position: absolute;
top: 183px;
left: 226px;
padding-top: 5px;
padding-bottom: 5px;
vertical-align: middle;
line-height: 30px;
z-index: 2;
}

/* obal na obsah, paticku a reklamu */
div#obsahaspol {
position: absolute;
top: 194px;
left: 89px;
width: 550px;
z-index: 1;
}

/* text na strance */
div#obsah {
background-color: #A2C3E7;
text-align: left;
border: 1px solid white;
}

/* matrjoska na okraje textu stranky - "obsahu" */
div#matrjoska {
padding: 20px;
padding-right: 60px;
}

div#footer {
background-color: #A2C3E7;
color: #999999;
text-align: center;
}

#reklama {
width: 550px;
text-align: center;
margin: auto;
}

HTML:

<body>

<div id="page">

<!--zacatek hlavicky s logem a menu-->

<div id="header"></div>
<div id="menu"></div>

<!--konec hlavicky s logem a menu-->

<div id="obsahaspol">

<div id="obsah">

<div id="matrjoska"></div>

</div>
<!--konec obsahu-->

<!--zacatek paticky a reklamy-->
<div id="footer"></div>
<div id="reklama"></div>
<!--konec paticky a reklamy-->

</div>
<!--konec divu s obsahem, patickou a reklamou-->

</div>
<!--konec centerovaciho divu-->
ja bych to tipl na to absolutni pozicovani. imho imho se ty absolutne pozicovany divy jakoby vytrhnou tim pozicovanim ze stranky pryc a pak se na ni zpatky prilepjej az po vykresleni toho zbytku. takze ten obalovej div s nima nepocita, protoze v nem vlastne nejsou, tak se podle nich nemuze roztahnout.

jestli je to kravina nebo to nechapete, berte ohled na to, ze je jeste moooc brzo rano a vstaval jsem v pet a ted zase usinam :-)
Nevím, zda je to tenhle problém.
Ale nadřazený DIV musí mít position:relative (nebo asi i absolute) a pak se další vnořené DIVy pozicují vůči němu.
Zrovna v tom je rozdíl v chování IEXP a Mozilly, tj. IEXP pozicuje jakoby správně i při chybném kódu.
Díky za tip, možná to bude tím absolutním pozicováním... zkusím s tím něco udělat a uvidíme:)
Jj, je to to pozicování. V #page jakoby nic není, takže má nulovou výšku. Můžeš buď použít jinou techniku layoutu, nebo to nafingovat jako obrázek na pozadí stránky (proužek široký jako #page, opakující se, nastavený na střed).