Изменить высоту столбца, поскольку другой столбец становится длиннее

Question

Я пробовал несколько вещей, чтобы решить эту проблему, но я не могу заставить ее работать.

Проблема в том, что у меня есть 2 колонки в качестве основной части моего сайта, справа и слева. На некоторых страницах в левом столбце много текста, поэтому он очень длинный, проблема в том, что правый столбец не удлиняется с левым столбцом.

Оба столбца имеют одинаковый цвет фона, а нижние колонтитулы отображаются по ширине обоих столбцов после окончания столбцов.

Моей первой мыслью было поместить оба столбца в элемент div, который будет иметь такой же цвет фона, как и они, и поэтому, если левый столбец станет длинным в 1500 пикселей, а правый столбец останется около 600 пикселей (из-за элементов внутри него) тогда это не будет отображаться, так как новый внешний div будет вытягиваться вместе с левым столбцом. Но по какой-то причине это не сработало. Может быть потому, что столбцы плавают?

У кого-нибудь есть другие идеи?

Вот сайт (очевидно, еще не законченный): Beansheaf Hotel

Я выбрал страницу, где в левом столбце много текста, поэтому проблема очевидна. Заранее спасибо,

InfinitiFizz

Answer 1

Этот парень решил это: http://www.ejeliot.com/blog/61

Кроме того, комментарии далее к этой статье предоставляют один или два других подхода, например, использование display: table.

Плавающая природа вашегостолбцы действительно являются причиной того, что div не расширяется, вы правы.Поэтому попробуйте использовать методику, подробно описанную здесь: http://www.positioniseverything.net/easyclearing.html

Стоит прочитать вокруг предмета, чтобы понять, почему, что и как, потому что многие люди испытывают необходимость делать это постоянно, а не только для столбчатых макетов..

Answer 2

Вот еще одна ссылка, которую я нашел полезной:

http://www.alistapart.com/articles/fauxcolumns/

Answer 3

Вы можете дать основному div свойство css display:table;, а внутренним элементам div свойство display:table-cell;.В противном случае вам нужно будет использовать <table> и поместить содержимое в <td> s.Предыдущее дает вам что-то вроде:

альтернативный текст http://img229.imageshack.us/img229/3209/divs.png