Poniżej kod w którym nie mogę znaleźć błędu tj. chciałbym aby div #sekcje_tlo dawał wypełnienie (przykładowy czerwony kolor) dla całego obszaru który oplata
niestety delkaracja height: auto nie działa
jeśli wpiszę tam ręcznie np. 400px to jak najbardziej zrobi mi się wypełnienie tych 3 sekcji, ale dopisywanie tekstu powoduje urwanie się tego wypełnienia po przekroczeniu zadeklarowanych 400px

gdzie jest błąd tj. dlaczego div #sekcje_tlo urywa się na samym początku zamiast opleść wszystkie divy?

[HTML] pobierz, plaintext 
 
<style>
#sekcje_tlo {
    width: 960px;
    height: auto;
    background-color: red;
}
 
#sekcje_wrapper {
    width: 960px;
    height: auto;
}
 
#sekcja_tytul1, #sekcja_tytul2, #sekcja_tytul3 {
    text-shadow:0.4px 0.4px 0px #fff;
    color: #000;
    font-size: 20px;
    margin-left: 10px;
    text-align: left;
}
 
#sekcja1, #sekcja2, #sekcja3 {
    float: left;    
    width: 320px;
}
 
#sekcje_tekst {
    float: left;
    margin: 10px;
    font-size: 13px;
    text-align: left;
}
 
#sekcja1_naglowek {
    float: left;
    width: 320px;
    height: 64px;
	background-color: blue;
}
 
#sekcja2_naglowek {
    float: left;
    width: 320px;
    height: 64px;
	background-color: yellow;
}
 
#sekcja3_naglowek { 
    float: left;
    width: 320px;
    height: 64px;
	background-color: gray;
}
</style>
 
<div id="sekcje_tlo">
 
    <div id="sekcje_wrapper">
        <div id="sekcja1">
            <div id="sekcja1_naglowek"></div>
                <div id="sekcja_tytul1">Sekcja1</div>
                <div id="sekcje_tekst">
                    Phasellus facilisis cursus augue consequat fermentum. Aenean pulvinar nisl vel est consectetur euismod. Ut sem ante, iaculis in aliquet ullamcorper, facilisis eget ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sit amet ipsum vel neque commodo commodo. Curabitur ac libero et.  
                </div>
        </div>
        <div id="sekcja2">
            <div id="sekcja2_naglowek"></div>
                <div id="sekcja_tytul2">Sekcja2</div>
                <div id="sekcje_tekst">
                    Nulla id molestie justo. Sed et congue elit. Proin sodales tortor eget libero rutrum posuere. Nunc bibendum velit nec felis ultricies gravida. In felis nunc, dignissim eu iaculis eget, molestie vel dui. Etiam ut erat tellus. Vivamus dictum iaculis vehicula. Donec hendrerit velit sem. Vestibulum ante ipsum primis. 
                </div>
        </div>
        <div id="sekcja3">
            <div id="sekcja3_naglowek"></div>
                <div id="sekcja_tytul3">Sekcja3</div>
                <div id="sekcje_tekst">
                    Donec nunc quam, cursus eget varius at, ultricies sed libero. <a href="#">Cum sociis natoque penatibus</a> et magnis dis parturient montes, nascetur ridiculus mus. Aenean placerat arcu at tortor mollis et condimentum quam mattis. Pellentesque vel risus dui. Etiam pharetra viverra adipiscing. Nulla elementum nibh id est sollicitudin vel ornare. 
                </div>
        </div>
    </div>
 
</div>
 
[HTML] pobierz, plaintext 

Bo div-y sekcja1, sekcja2 i sekcja3 mają ustawione opływanie (float), które należy wyczyścić wstawiając pomiędzy liniami 79-80 kod:

[HTML] pobierz, plaintext 
<div class="clear"></div>
[HTML] pobierz, plaintext 

przy czym styl klasy clear to:

[CSS] pobierz, plaintext 
.clear {
  clear: both;
}
[CSS] pobierz, plaintext 

ogromne dzięki!