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.