img z floatem nie powiększa height diva, w którym siedzi

[pariah]

kod

Kod: Zaznacz cały

<div style="border: solid 1px red; width: 80%;">
  <img style="float: left; width: 150px; border: solid 1px blue" src="150na500.png" alt="">
  asdasdasdasdasdasd ala ma kota
</div>


świruje, tzn. DIV się nie rozpycha w dół pod wpływem IMG tylko zawsze posiada wysokość tekstu. Tak ma być czy tak ma nie być? Opera i ie6 rozpychają, mozilla navigator też nie rozpycha. Nie mam zbytnio jak tego ominąć bo wysokość obrazków u mnie na stronie tych z lewej jest zmienna

[Witia]

Wbrew pozorom Firefoks zachowuje się poprawnie. Opis zagadnienia wraz z rozwiązaniami jest pod adresem:
http://complexspiral.com/publications/c ... ng-floats/

Z grubsza chodzi o to, że, jeśli chcemy, by następny element już nie opływał wcześniejszego, to musi mieć ustawioną własność clear. Jeśli chcemy mieć ramkę czy tło elementu, to wewnątrz niego powinien być jakiś element z clear, umieszczony później niż ten opływany. Gdy się inaczej nie da, to ostatecznie można wstawić pustego diva z własnością clear.

[pariah]

dzięki, wszystko wyjaśnia.

[marcoos]

Jeśli chcemy mieć ramkę czy tło elementu, to wewnątrz niego powinien być jakiś element z clear, umieszczony później niż ten opływany. Gdy się inaczej nie da, to ostatecznie można wstawić pustego diva z własnością clear.

Bezsensowne tworzenie śmieciowatych elementów (chyba że chcemy sczyścić tylko lewy albo tylko prawy float - wtedy ma to sens). Prościej i bardziej elegancko nałożyć overflow: auto na kontener.

Kod: Zaznacz cały

<div style="overflow: auto; border: 1px solid red;">
 <img style="float: left" alt=";-)" src="http://mozillapl.org/images/bgHelpArea.png" />
 Cuda panie, cuda...
</div>


[Witia]

Trzeba jeszcze pamiętać, że w IE, przynajmniej do wersji 6, element rozciągnie się, gdy ma "layout" (hasLayout). W tym przypadku jest on wymuszony przez nadanie szerokości. Bez zdefiniowanej szerokości również w IE ramka nie wyświetli się wokół całej grafiki. "overflow: auto" nie daje w IE tego efektu, co np. w Firefoksie.

Więcej: http://kurs.browsehappy.pl/Bugi/HasLayout

[marcoos]

Trzeba jeszcze pamiętać, że w IE, przynajmniej do wersji 6, element rozciągnie się, gdy ma "layout" (hasLayout). W tym przypadku jest on wymuszony przez nadanie szerokości. Bez zdefiniowanej szerokości również w IE ramka nie wyświetli się wokół całej grafiki. "overflow: auto" nie daje w IE tego efektu, co np. w Firefoksie.

Więcej: http://kurs.browsehappy.pl/Bugi/HasLayout

Więcej o czyszczeniu floatów bez dodatkowych "clearing divs"... u PPK.