Выравнивание колонок по высоте

[param]

Здравствуйте.

Необходимо, чтобы колонки сайта в независимости от наполнения контентом были одинаковой высоты и прижимались к футеру. Немного погуглив, увидел несколько различных способов, как мне показалось использование картинки и её вытягивание, является наиболее эффективным способом. Но мне остался непонятным момент как всё таки прижать её к футеру...

[abused]

Если я правильно понимаю, то можно попробовать поиграться с относительным и абсолютным позиционированием, типа так:

div#container{
  position: relative;
  height: 100%; /* сугубо для наглядности, в реальных условиях вряд ли понадобится */
}
div#columns{
  position: absolute;
  bottom: 0;
}

<div id="container">
  <div id="columns">колонки тута</div>
</div>

Edited January 23, 2012 by abused

[param]

Не думаю, что в данной ситуации позиционирование как-то поможет...

[param]

Можно создать очень высокую картинку, вставить её бэкграундом к колонке и поставить повторение по вертикали. Но у меня где-то косяк, картинка не в какую не хочет повторятся и растягиваться как надо... Применял бэкграунд и к оборачивающему блоку и к колонке и к ним обоим - безрезультатно.

[sammasati]

Высокая картинка не нужна. Достаточно пары пикселей в высоту. Фон задается так:

background: url(../i/back.png) repeat-y;

Применять его нужно к обертке колонок.

Если что не получается - выкладывайте код на http://jsfiddle.net/

Edited January 23, 2012 by sammasati

[param]

http://jsfiddle.net/Wj3fu/

Бордюры стоят по краям, так как именно их я пытаюсь эмулировать. Я создал картинку бэкграунда равную ширине колонки с белым фоном и с однопиксельной границей (у левой колонки с правого, у правой колонке соответственно с левого).

Задаю бэкграунд #middle, линия немного вытягивается вниз, но до футера ей очень далеко...

[sammasati]

Вот как-то так: http://jsfiddle.net/Wj3fu/3/

Правда, в IE7 футер вниз не уходит

Edited January 23, 2012 by sammasati

[param]

sammasati, спасибо за помощь, буду разбираться!

[param]

Пытался разобраться, да так и ничего и не вышло...

Пытался я применить ваше решение, и вот результат http://jsfiddle.net/8MFgL/1/ (отличие от прошлого шаблона тут два header)... Голова уже пухнет, но я не понимаю почему эта картинка не тянется .

Edited January 24, 2012 by param

[sammasati]

У wrapper не установлена высота, поэтому middle не может растянуться.

[param]

А как же height:100%?

[sammasati]

А он перебивается этим:

    height:auto !important;

По-моему, это какой-то хак для ие. Зачем он там нужен - не знаю. Этот шаблон можно сделать без всяких хаков.

Но суть не в этом. А в том, что стоит забить на генераторы шаблонов и научиться верстать самому.

Edited January 24, 2012 by sammasati

[param]

Спасибо. Наконец-то фон начал тянуться, но сразу же возникла следующая проблема, когда забиваешь много контента, тянется почему то он до некого определённого места, а потом снова обрезается.

[Gaspode]

Оно?

[param]

Gaspode статья про метод, а он в данном случае определён (фоновая картинка).