Ostatnio napotkałem na następujący problem: div w którym miała znajdować się główna treść strony miał być z lewej i prawej strony ozdobiony grafiką, której wysokość miała się automatycznie dopasowywać do wysokości elementu div w zależności od ilości treści jaka się w nim znajdzie. Szerokość była z góry założona i stała.

Problem polegał na tym, że wysokość div nie jest dziedziczona w żaden sposób od obiektu nadrzędnego, jak również nadanie parametru height:auto nic nie pomoże z przyczyn oczywistych. Problem z poprawnym wyświetlaniem takiego efektu nie ma przeglądarka IE7.0. Poblem dotyczy pozostałych, zgodnych z najnowszymi standardami przeglądarek. Rozwiązanie problemu można obejrzeć tutaj (kod strony w pełni dostępny poprzez wybranie funkcji “Pokaż źródło strony”).

W powyższym przykładzie jest zagnieżdżonych kolejno 5 elementów div, przy czym div z zawartością (piąty, najbardziej zagnieżdżony) rozciąga w pionie pozostałe, które zawierają odpowiednie elementy graficzne. W IE7 strona wygląda dobrze, za wyjątkiem różnic w interpretacji parametrów margin i padding. W przeglądarkach Firefox/Opera rozciąganie możliwe jest poprzez zastosowanie div z parametrami clear:both oraz height:0px. Taki element będzie niewidoczny w przeglądarkach Firefox/Opera. Dopisanie jednak tych dodatkowych elementów div do kodu strony spowoduje, iż pojawią się one w… IE7! W ostatecznym rozwiązaniu problemu pomogą instrukcje warunkowe (ang. conditional comments), umożliwiające ukrycie części kodu dla wybranych przeglądarek.

Przydatne linki:
CSS DIV layouts
CSS Rollover, Columns, Rounded Corners, Margin/Padding