Sytuacja jest prosta. W pewnym miejscu serwisu przestała się pokazywać zawartość jednego z boksów. Widać było sam kontener, prawidłowo wypełniony tłem i prawidłowo rozciągnięty w pionie przez swoją zawartość.
Jedno ale. Zawartości nie widać.
Przykładowy listing:
- <div class=”a”>
- <div id=”dyn”></div>
- </div>
- <div class=”a”>
- <div class=”b”>treść</div>
- </div>
Wszystkie divy są float’owane do lewej, wszystkie też mają ustawiony clear po lewej stronie. Całość znajduje się w jakimś divie o ustalonej szerokości, a div.a mają taką samą szerokość jak parent oraz padding:0;margin:0.
Kluczem całego błędu okazało się być to, że div#dyn ma dynamicznie generowaną zawartość. (kalendarzyk).
Co było błędem?
Zmieniająca się wysokość pierwszego div.a powodowała przesunięcie drugiego div.a, jednocześnie div.b pozostał na swoim miejscu. Jego top … się nie zmienił, mimo position:static. Po prostu pozostaje, tam gdzie stał, wyłażąc w lewo poza lewy margines rodzica.
Jak naprawić?
Drugi div.a musi być ustawiony na float:none – wtedy problem nie występuje.