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.

Trochę nie skumałem; podrzuciłbyś screena?

Jeśli pomoże: http://www.alistapart.com/articles/holygrail

Witam. No może rzeczywiście trochę zamotałem się w opisie. Spróbuje jeszcze raz;) A więc mam jeden główny div i w nim dwie kolumny (div lewy i prawy). Obydwie kolumny wypełniają w całości tego głównego div-a. Przyjmijmy, ze jedna ma być czerwona a druga biała (jak flaga;). I teraz:

• gdy zawartość ich jest mniejsza niż wysokość ekranu div jest rozciągnięty na całą wysokość ekranu i mamy taka odwrócona flagę...
• gdy zawartość którejkolwiek kolumny jest większa niż wysokość ekranu i włączy się boczny pasek przewijania w przeglądarce to również mamy tło na całej wysokości ekranu, a nie tylko do wysokości krótszej kolumny...

Można to zobaczyć na przykładzie jaki zamieściłem w poprzednim poscie. W IE jest OK, w innych przeglądarkach nie działa...:/

Co do tła - celowo podałem linka do A list apart.

google: 100% height div CSS...