[CSS]Div wychodzi z diva, Div wychodzi z diva po zastosowaniu float Opcje

[Gecko]

[HTML] pobierz, plaintext 
<div class="tresc">
    <div class='ramka'>
        <div class='naglowek'>
            Użytkownicy
        </div>
            aaaaaaaa            
            <div class='osoba'>
                <img src=></img>
                <br>
                Kto
                <br>
                Admin
            </div>
            <div class='osoba'>
                <img src=></img>
                <br>
                Kto
                <br>
                  Admin
            </div>
    </div>
</div>
[HTML] pobierz, plaintext 

Kod

   .tresc {
   width: 604px;
   float: left;
   overflow: hidden;
   background-color: #006699;
   height: 100%;
   }
   .naglowek
   {
   background-color: #003366;
   }
   .ramka {
   margin-left:5px;
   margin-right:5px;
   margin-bottom:15px;
   border: solid #003366 2px;
   }
   .osoba {
   margin-left:15px;
   margin-top:15px;
   text-align: center;
   width: 100px;
   }

Gdy dla .osoba nie ma ustawionego float:left; divy układają się tak:
Bez float
Zaś gdy ustawie float: left; dla .osoba:
Float left
Jak widać te mały divy (które wyświetlają w sobie obrazek etc.) wyskakują z diva ramka po ustawieniu float: left;. Dlaczego tak się dzieje?
Chcę uzyskać coś takiego:
Tak ma być
Z góry dziękuję za pomoc.