[HTML][CSS] Problem z tlem div-a Opcje

[lukash82]

Witam. Mam takie pytanie odnośnie robienia tła w div-ie dla strony www. Mam głównego div-a "strona" oraz dwa div-y w nim czyli "lewa" i "prawa". I teraz pytanko. Jak zrobić aby tło lewej strony miało wysokość 100% wysokości strony. Nawet wtedy gdy zawartość jej jest dużo większa niż wysokość strony. Dla przykładu główny div:
"strona" jest zielony,
"lewy" jest czerwony,
"prawy" jest żółty.

Wszystko działa pod IE o dziwo (ale to pewnie przez przypadek... Niestety w reszcie tych porządniejszych przeglądarek nie działa to tak jakbym chciał. Mój kod dla przykładu:

[HTML] pobierz, plaintext 
<style>
body{
    margin                : 0px;
    padding                : 0px;
}
#strona{
    margin                : 0px;
    padding                : 0px;
    width                : 960px;
    background-color    : green;
    float                : left;
    height                : 100%;
}
#strona .lewa{
    margin                : 0px;
    width                : 400px;
    float                : left;
    background-color    : red;
}
#strona .prawa{
    margin                : 0px;
    padding                : 0px;
    width                : 560px;
    float                : right;
    background-color    : yellow;
}
</style>
<div id="strona">
    <div class="lewa">
        lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />lewa<br />
    </div>
    <div class="prawa">
        prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />prawa<br />
    </div>
</div>
[HTML] pobierz, plaintext 

Próbowałem już na różne sposoby ale bez powodzenia. Chciałem podłożyc obrazek pod główny div "strona" ale działa to tylko jeśli zawartość strony mieści się na wysokość ekranu. Po dodaniu większej ilości treści do którejś ze stron robią się klocki w FF i innych oprócz IE. Ogólnie efekt jaki chce uzyskać działa właśnie pod IE. Jak zrobić to w FF, etc.? Jeśli wiecie to dajcie znać lub napiszcie jakieś pomysły. Pozdrawiam, Łukasz.