[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

[nitek]

witam,

wydaje mi się, że odpowiedź jest tutaj: http://kurs.browsehappy.pl/CSS/Float, a dokładniej w tym fragmencie:

Najważniejsze cechy obiektów z float:
* tekst i elementy z display:inline zawsze je opływają,
* są wyjęte z normalnego biegu dokumentu — nie muszą być na ekranie w takiej kolejności, w jakiej są w dokumencie oraz mogą wystawać poza dolną krawędź obiektu, w którym się znajdują,
* tworzą swój własny bieg dokumentu, przez co kilka elementów z float nigdy nie będzie się nakładało (w przeciwieństwie do pozycjonowania absolutnego), tylko ułożą się obok siebie.

a potem pomocne będzie dla Ciebie to:

Ponieważ obiekty z float są wyjęte z normalnego biegu dokumentu, mogą rozciągać się nad kilkoma innymi — np. ilustracja może rozciągać się z boku kilku akapitów.
Aby uniknąć tego efektu należy jakiemuś elementowi za elementem z float nadać właściwość clear — powoduje ona ponowne „złączenie” float z biegiem dokumentu.

Ogólnie polecam lekture całego artykułu - jak dla mnie autor elegancko wszystko opisał.
pozdrawiam

[l0ud]

Niestety, ale atrybut clear:both w contents_row co prawda rozwiązuje sprawę tutaj, ale gdy w warstwie contents tylko jeden contents_row nie zadziała Co zrobić w takim wypadku? Bo chyba dodatkowego elementu specjalnie po to nie będę umieszczał?

[nitek]

możesz spróbować w następnym elemencie po wykorzystaniu float dać

Kod

<br style='clear:both'>

- taka mała, ale chyba powszechnie stosowana sztuczka

[l0ud]

Owszem, działa, ale jak pisałem powyżej - dodawanie nowego elementu mnie po prostu nie satysfakcjonuje Przecież chyba nie po to są style, żeby to dodatkowo komplikować...?

[dr_bonzo]

Mozesz dodac styl do nastepnego elementu, lub uzyc-niedzialajacego-w-IE :after

[l0ud]

Mozesz dodac styl do nastepnego elementu

Problem w tym, że następnego elementu w warstwie contents już nie ma :/

No nic, w tym wypadku po prostu zastosuję ten trick co podał nitek, ew. w trochę innej postaci. Całe szczęście, że warstwy contents z jednym contents_row mam tylko w PA...

Dzięki za pomoc

[woj_tas]

Dodaj

[HTML] pobierz, plaintext 
overflow:hidden;
[HTML] pobierz, plaintext 

dla .contents_row