За разлика от табличното представяне на HTML елементите, при безтабличното такова, при използването на div тага, се появяват някои усложнения за уеб разработчика, за преодоляването на които се налага да се използват допълнителни техники. В случая ще засегна постигането на еднаква височина на съседни блокови елементи с различно съдържание.
Описание на проблема: въпреки валидния XHTML/CSS код и правилното структуриране/подреждане на блоковете в кода на страницата, разликата във височината на елементите променя цялата визия на HTML документа.
Решението на този проблем е в използването на свойството display за блоковия елемент (div) и указването на стойности, които да го карат да се държи и изобразява от браузърите като таблица, а неговите вложени елементи да се идентифицират като редове/колони. За целта на обхващащия div таг се задава стойност display: table;, на вложения в него див елемент, задаваме стойност display: table-row;, а на вложените в него div елементи, съответно стойности display: table-cell;.
Оригинален пример от сайта 456bereastreet.com, използващ описания похват:
2 divs same height solution
Много благодаря за урока или съвета. Изпробвах техниката- работи а преди това ползвах javascript, което е много по ресурсоемко.