[HTML/CSS] Obrazki z float wyjeżdżają poza warstwę Opcje

[l0ud]

Witam, aktualnie 'migruję' z tabelek na warstwy i kolejno pojawiają się problemy z tym związane. Oto kolejny z nich: gdy nadam akapitowi/obrazkowi float:left zostaje on jakby pozycjonowany bez względu na inne obiekty. Gdy umieszczę go w jakiejś warstwie, po prostu wyjeżdża poza nią, a nie rozciąga jak wg. mnie powinien robić.

Kod html:

[HTML] pobierz, plaintext 
<div class="contents">
<h1>Testowa podstrona</h1>
<div class="contents_row"><p style="float:left"><a href="javascript:display(29,800,600);"><img src="./photos/th29.jpg" alt="Lilie wodne.jpg" title="Lilie wodne.jpg" class="instant ishadow40" style="border-width:1px;" /></a></p>
 test test</div>
<div class="contents_row"><p style="text-align:right"><a href="#page_area" title="Do góry strony">:: Na górę ::</a></p>
</div>
</div>
[HTML] pobierz, plaintext 

Wraz z CSS:

Kod

DIV.contents {
     border-width: 1px;
     border-style: solid;
     border-color: #B6830A;
     background-color: #FFFDF5;
}

H1 {
     background-color: #FFE58B;
     background-image: url('images/contents_h_background.jpg');
     margin: 0px;
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
     line-height: 26px;
     vertical-align: middle;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10pt;
     font-weight: normal;
     color: black;
     text-decoration: none;
}

DIV.contents_row {
     border-top-style: solid;
     border-top-color: #F8DA98;
     border-top-width: 1px;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 4px;
     padding-bottom: 4px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: normal;
     color: black;
}

Dają taki piękny efekt:



Przy tabelkach tak się nie działo Pewnie nie rozumiem do końca działania atrybutu float...

Proszę o odpowiedź i pozdrawiam