Witam,

Mam pytanie, jak zrobić trzy kolumny, które będą się dostosowywały do wysokości najwyższej i będzie to poprawnie interpretowane przez wszystkie przeglądarki.

Próbowałem coś co prezentuje poniżej ale nic z tego i kompletnie nie mam pomysłu jak to obsłużyć dynamicznie:

<div>
<div style="width:100px; float:left; height: 100%;border:solid 1px #000000;">
<br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br /><br />as</br />
</div>
<div style="width:400px; float:left; height: 100%;border:solid 1px #000000;"></div>
<div style="width:100px; float:left; height: 100%;border:solid 1px #000000;"></div>
</div>

chcesz to zrobić ze względu na jakieś funkcjonalne zastosowanie czy estetyczne (tło wszystkich trzech tak samo "wysokie")?

a nie lepiej tabela jeden wiersz trzy kolumny

jeśli ma tam zamiar przedstawiać dane tabelaryczne to jak najbardziej, w innym wypadku - nie.

Symulowanie kolumn tłem. Poszukaj w necie "Faux column"

Jeżeli powyższe ci nie wystarczy to "jquery equal height". W dzisiejszych czasach tylko sadomaso-desperacji wyłączają JS, więc możesz to stosować. Niektórzy użytkownicy telefonów też wyłączają JS, ale dla nich kolumn nie powinieneś robić, więc też nie ma problemu. Nie jest to w 100% prawidłowym używanie JS do ustawiania layoutu, ale jest to najłatwiejsze i imo w większości przypadków lepszego rozwiązania nie znajdziesz.

(PS. nie chcę zaczynać kolejnej dyskusji o tym, że powinno być to zrobione w zwykłym CSS, w którym się tego na 100% nie da zrobić, by działało POD KAŻDĄ przeglądarką).

Oczywiście CSS3 daje ci już sporo możliwości w tej kwestii, ale obsługa CSS3 na dzień dzisiejszy jest o wiele gorsza niż jquery

Jeżeli nie interesuje cię IE6, możesz użyć wyświetlania typu "table". Jest to w 100% prawidłowe.

Pozostaje też tabelka, ale to jest najgorsze z możliwych rozwiązań.


Ogólnie - budowanie kolumnowych laji w CSS to średni pomysł.