[CSS] Problem z powielaniem tła w kolumnach obok siebie Opcje

[-Supek-]

Próbuję sobie robić stronę w której obok siebie , biegną dwa bloki <div> każdy z osobnym tłem obrazkowym. Ale różnica w ilości tekstu po każdej ze stron powoduje, że tlo nie powiela się równomiernie. Albo brakuje go z lewej strony albo z prawej. Próbowałem już nawet uzupełniać braki poprzez znacznik <br />, ale niestety wstawienie grafiki na którąś ze stron, czy różnica w wysokości czcionki, nie pozwalają na to aby strony się pokryły. Nie wiem co zrobić.
Proszę o pomoc i może jakąś naukę na przyszłość.

CSS dotyczący tych kolumn wygląda tak jak poniżej, gdzie TEXT jest blokiem głównym zawierającym wewnątrz dwa bloki TEXT1 i TEXT2.

#TEXT {
background: url() ;
width: 1006px;
height: auto;
overflow: hidden;
}
#TEXT1 {
background: #669933 url(images/4b1b.png) repeat-y;
width: 676px;
float: left;
height: auto;

}
#TEXT2 {
background: #669933 url(images/4b2a.png) repeat-y ;
width: 330px;
float: left;
height: auto;

}

w pliku .html zapis wygląda tak

<div id="TEXT">
<div id="TEXT1"> tutaj tekst i grafiki...</div>
<div id="TEXT2"> tutaj tekst...</div>
</div>