Problem med avanceret elastisk CSS layout.

Hejsa.. Sidder og bakser med et problem i CSS - er ved at nå den konklusion at der nok desværre ikke findes en løsning på mit problem, men vil lige høre om der skulle være nogle herinde der kan nogle tricks!?

Har følgende kode:

<div id="wrapper">
    <div id="top"></div>
    <div id="bottom"></div>
</div>

#wrapper skal have en højde på 50% af BODYen.

#top skal udvide sig alt efter hvor meget indhold der er i den, men maks til 50% af #wrappers højde - Hvis der kommer for meget indhold i #top skal der komme en scrollbar (overflow: auto;).

#bottom skal udvide sig alt efter hvor meget indhold der er i den, men maks til den højde der nu er efterladt til den (Altså, maks højden af #wrapper minus hvad end nu #top må fylde) - den skal lige ledes have overflow:auto hvis dens indhold overstiger dens maks højde.

- Håber denne forklaring giver mening!?  :-)

Har forsøgt mig på en masse forskellige måder, desværre uden held. (Har sågar prøvet at bruge Tables, men kan ikke få det til at virke. - Vil helst undgå Tables, men det er en acceptabel løsning hvis intet andet virker.)

Det skal virke i IE7,  Firefox. (Er i dette tilfælde ikke nødvendigt at det virker i IE6 eller andre browsere ud over de nævnte) :-)

Håber der er nogle der kan løse dette :-)

Mvh. Rasmus