Пользователь
0,0
рейтинг
11 июля 2009 в 14:51

Разработка → 4 способа как создать блоки одинаковой высоты перевод

CSS*
fourmethodsbanner
Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.

Равная высота

Способ 1. Использование свойства display: table


Для реализации макета используется список (ul) или блок div с вложенными в него блоками для строки и  каждой из колонок. Обрамляющему блоку div присваивается значение display: table, а каждому вложенному блоку-колонке значение display: table-cell.
Рассмотрим пример со списком.
HTML код:
<div class=”base”>
<ul class=”base-row”>
<li class="cell1"><div class="content1" >.....Lots of Content....</div></li>
<li class="cell1"><div class="content2">.....Lots of content....</div></li>
<li class="cell1"><div class="content3">.....Lots of content....</div></li>
</ul>
</div>

CSS:
.base {
/*make it 100% width and a minimum of 1000px width*/
width: auto;
margin-left: 0px;
margin-right: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row {
Display: table-row;
}
.base li {
display: table-cell;
width: 33%;
}
.cell1 {
background-color: #f00;
}
.cell2 {
background-color: #0f0;
}
.cell3 {
background-color: #00f;
}

Посмотреть пример

Преимущества:


Это наиболее простой и легкий способ создания колонок одинаковой высоты, в отличие от других методов.
Внешний отступ (margin, как cellspacing для таблиц) равный для всех колонок создать не получится, однако, его можно заменить границей белого цвета (или цвета фона колонки) с соотвествующей шириной для иммитации отступа.

Недостатки:


Этот метод не работает в браузерах IE7  и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.

Способ 2: Использование JavaScript


Этот метод основан на использовании небольшого JS кода (JQuery), который “расставляет” нужную высоту каждой колонке на основе высоты наиболее длинной из них.
HTML код:
<div class=”container”>
<div class=”leftsidebar”> … Lots Of Content … </div>
<div class=”content”> …. Lots Of Content … </div>
<div class=”rightsidebar”> … Lots Of Content … </div>
</div>

CSS:
.container {
Width: 900px;
Margin-left: auto;
Margin-right: auto;
}
.leftsidebar {
Float: left;
Width: 33%;
}
.content {
Float: left;
Width: 33%;
}
.rightsidebar {
Float: left;
Width: 33%;
}

JavaScript ( jQuery):
function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});

Вы можете положить JS код в отдельный файл и вызвать его непосредственно в  HTML коде. В этом случае, инициализация JQuery должна быть по коду расположена выше.
Код, который вам нужно изменить – это название класса блока, который создает колонки. В данном примере это класс container:
.container > div

Вы можете изменить название класса блока с колонками или, даже, добавить класс к каждому блоку-колонке и использовать их раздельно, для удобства.
Посмотреть пример

Преимущества:


Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с  CSS кодом для выравнивания высоты.

Недостатки:


Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

Способ 3: искусственные колонки


Этот метод придуман одним из первых для реализации колонок одинаковой высоты. Суть его в том, что обрамляющему блоку присваивается фон, иммитирующий колонки (см. рис. ниже). Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона.

Фон для колонок

HTML код:
<div class=”container”>
<div class=”left”></div>
<div class=”content”></div>
<div class=”right”></div>
<div class=”clearer”></div>
</div>

CSS:
.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

}

.leftsidebar {
float: left;
width: 200px;
}

.content {
float: left;
width: 400px;
}

.right {
float:left;
width: 300px;
}

.clearer {
clear: both;
}

Посмотреть пример

Преимущества:


Очень простая реализация.

Недостатки:


Этот метод можно использовать только для макетов/колонок фиксированной ширины.

Способ 4: Использование раздельных блоков с фоном


Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.
HTML код:
<div class=”rightback”>
<div class=”contentback”>
<div class=”leftback”>
<div class=”leftsidebar”>…Lots Of Content…</div>
<div class=”content”> …Lots Of Content…</div>
<div class=”rightsidebar”> …Lots Of Content…</div>
</div>
</div>
</div>

CSS:
.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px;    /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}

.container {
width: 900px;
margin-left: auto;
margin-right:auto;
}

.leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

.content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

.rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:
  1. .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
  2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
    .leftback соотвествует.leftsidebar,
    .contentback – .content
    и .rightback – .rightsidebar.
  3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков <div> задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar). (см. рис. ниже)
  4. Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.
  5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина .rightsidebar (300px) и .content (400px) = 700px.( B+G)

На рисунке ниже изображено как располагаются блоки .rightback, .contentback и.leftback. Крайний слева – .rigthback, крайний справа -  .leftback.
Пояснение к технике
Пунктирная линия показывает видимую область колонок (блок .rightback обрезан с помощью overflow: hidden).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов <div> .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.
Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G
Пояснение к технике
Этот метод подробно описывается в  этой статье.
Посмотреть пример для 3х колоночного макета | Посмотреть пример для 4х колоночного макета

Преимущества:


Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:


Метод не так прост, как остальные, однако, он позволяет создать столько равных по высоте колонок, сколько требуется.

Вывод


Каждый из методов имеет свои преимущества и недостатки, но, наверняка, вы выберите для себя последний метод, который позволяет создать колонки равной высоты, работающие в любом браузере и без JS.
Перевод: Zach Dunn
Ольга @habratchanka
карма
92,6
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (137)

  • +25
    Обзор хороший, но по сути — все есть костыли, и ради чего? Чтобы не использовать старый добрый table. )
    • 0
      Да уж. И пока люди не забудут про ИЕ как про страшный сон — покой нам только снится.
      • 0
        ИЕ 6 и 7 только лишь ;-)
        Так что не так все страшно…
        • 0
          К сожалению ИЕ 8 также как и его предшественники глючный дальше некуда, и многих стандартов W3C так и не признаёт :(
          • 0
            Ну лучше чем плясать с бубном вокруг простейших эффектов, верно? Вспомнить хотя бы глюк со стилями для abbr (или acronym, не помню уже).

            Из двух зол, как говорится.
            • 0
              эт да! но я очень удивился то что «это» до сих пор не понимает «высоту» «предков» если его заставляешь парсить по стандартам.
              • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      старый и ужасный тэйбл.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Эта притча была рассказана одно тысячелетие назад каким-то проповедникам, в ней table большое зло. Атуй его.

          P.S. А вообще говорят, что пока весь код table не загрузится — его контент не отобразится, а у див все типа шито крыто.
          • НЛО прилетело и опубликовало эту надпись здесь
            • +2
              блин. Не нужно сравнивать тэйблы с блоками в контексте когда HTML используется только для хранения данных, а CSS оформление.
            • +1
              В табличной верстке сложно разбираться. Она менее понятна, чем блочная.
              • НЛО прилетело и опубликовало эту надпись здесь
              • +8
                <table>
                  <tr>
                    <td>раз колонка</td>
                    <td>двас колонка</td>
                    <td>трис колонка</td>
                  </tr>
                </table>
                


                Это менее понятно, чем примеры из статьи? Ах да, приведённый выше код не требует никаких жабаскриптов, работает во всех браузерах, в принципе он и без ксс обойдётся :)

                Пы.Сы: по крайней мере Опера умеет отображать табличный контент по мере загрузки, современные скорости, в массе своей, не особо то и напрягают с полной загрузкой страницы :)
                • 0
                  Еще навешайте туда кучу атрибутов и тогда совсем «понятно» станет))))
                • +1
                  С сегодняшнего дня начну верстать таблицами.

                  Я где-то говорил что я против таблиц в конкретном примере? Хотя я все равно против… :)
                  Ваш код синтетический. Добавьте в него оформление (углы скругленные, разделители между колонками и т.д.) и посмотрим что у вас получится (скорее всего возникнет соблазн делать подобные моменты за счет введения новых столбцов и строк). В большой таблице, часть элементов которой отвечают за дизайн, реально сложно разобраться. В такой верстке, в отличие от блочной, тяжело разделить разметку и оформление (при блочной верстке оформление можно запихнуть в отдельный элемент в начале или конце блока, а при табличной мы завязаны на структуре таблицы).

                  Если вы используете таблицу только для разметки колонок, а дальше у вас будет нормальная верстка — получится вполне себе хороший код и простая реализация и это замечательно. Хотя я все равно бы использовал 3 или 4 div-а (для трехколонной верстки). Почему?

                  <table>
                    <tr>
                      <td>раз колонка
                               <table>
                                      <thead>
                                              <tr>
                                                     <th>Столбец 1</th>
                                                     <th>Столбец 2</th>
                                              </tr>
                                      </thead>
                                      <tbody>
                                              <tr>
                                                      <td>бред</td>
                                                      <td>бред</td>
                                              </tr>
                                              <tr>
                                                      <td>бред</td>
                                                      <td>бред</td>
                                              </tr>
                                      </tbody>
                                 </table>
                      </td>
                      <td>двас колонка</td>
                      <td>трис колонка</td>
                    </tr>
                  </table>


                  При блочной верстке работать с такой конструкцией будет удобней (если в колонках будут реальные таблицы).
                  Ну и самое главное. :)
                  Верстать блоками проще. Как я в свое время запарился подгонять бордеры меню, содержимого сайта и т.д… :(
                  • +1
                    Я где-то предлагаю верстать таблицами? Я предлагаю в данном конкретном случае использовать таблицу, т.к. это проще. Внутри ячеек можно всё делать как душе угодно.
            • +1
              > А вообще говорят, что пока весь код table не загрузится — его контент не отобразится
              Это правда, но ведь это крайне редко мешает, таблица должна быть просто огромной, чтоб пользователь что-то заметил, при нынешних скоростях инета… И в случае с огромной таблицей лучше конечно использовать div, но я бы всё равно смешал, только на дивах мне не нравится однозначно.
          • 0
            P.S. Не просто говорят "Не очевидные истины. Скелет страницы таблицей. Неправильно.", но и подтверждают на практике ;)

            Вообще таблицы сами по себе не зло, зло их использовать для разметки. Если же требуется выводить табличные данные (в данные в колонках как раз таковыми и могут быть), то ни чего криминального в этом нет.
            • +3
              Давайте переименуем table в что-нибудь другое, назовем тег по другому, а механизм оставим. Думаю все сразу будут довольны. Это же уже не таблицы.

              P.S. Я хочу сказать то, что механизму приписали определение таблиц и все в это верят.
              • –3
                Во что верят, не уловил… В то, что содержимое таблицы не отображается браузером до получения закрывающего table? Так это не вопрос веры, это факт.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • –3
                    Не только в IE. Во всех браузер. Аргумент я привел причем в практическим примером (которы не понятно с какого перепоя минусанули, хотя понятно, лемминги...).

                    Какой тут еще пример нужен?! Нагляднее некуда, каждый может сходит и ссылке и сам убидиться.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • –1
                        Хотя бы на теоретическом уровне поясните, почему не то?

                        Приходилось ли на лично опыте в этом убеждаться? Не теорезировать, а прямо на практике взять и протестировать?

                        Пока по ощущениям в данном треде конкретные практические примеры и доказательства только я и привожу.
                        • НЛО прилетело и опубликовало эту надпись здесь
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • +1
                            Опера 10beta — аналогично, разницы нет. Обе страницы отрисовываются одномоментно ~ на 8й-10й секунде.
          • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            При нынешних скоростях инета какова вероятность что не загрузится?
        • 0
          Table ужасен, прежде всего, тем, что это первый, так сказать, «инструмент», который осваивают начинающие верстальщики. Нет ничего плохого в том, чтобы организовать раскладку страницы таблицей, но вот лепить эти самые таблицы где ни попадя, как зачастую и делают, уже явный перебор.
          Никогда не встречали три-четыре вложенных одна в другую таблиц с одной единственной строкой и столбцом? А я встречаю, и притом очень часто.
          Вот этим, скорее всего, и вызвана ненависть к таблицам. Не столько из-за самих таблиц, как из-за неправильного повсеместного их использования.

          P.S. Ах, да. Попробуйте в табличной сменить местами порядок вывода колонок.
          • НЛО прилетело и опубликовало эту надпись здесь
  • +6
    Эх, если бы display:table-cell и иже с ним работали во всех браузерах — каждый второй был бы верстальщиком
    • НЛО прилетело и опубликовало эту надпись здесь
    • +4
      Поверьте в вёрстке помимо этого, еще достаточно причин чтобы им не становится.
      • 0
        Плаваем — знаем ;)
  • 0
    В чём в данном случае причина отказа от таблицы? Объясните пожалуйста.
    • +4
      семантика наверное, хотя заменять таблицу на список то еще извращение :)
      • 0
        Точно, и вряд ли семантика вложенных друг в друга дивов лучше семантики вложенных TR/TD ;-) (и не хуже, разумеется)
      • +2
        даже еще хуже: заменять таблицу на список, у которого в стилях написано «display:table-cell».
    • 0
      3 Колонки — это не таблица, в этом и причина
      • 0
        А почему бы не объединить их в таблицу? Тем более нужна именно равная высота.
  • +7
    Наша песня хороша, начинай с начала
    «Table vs Div»
    • –10
      К счастью методы написанные здесь показывают своё превосходство и простоту…
      • +11
        ага, 50 строк в css куда круче, чем 5 строк для table ;)
        • –2
          Зато если надо чтолибо подкорректировать (напр. 1 столбик повыше ). то это делается элементарно… чем возится с таблицами…
          • 0
            О чём вы, вся статья посвящена именно тому, чтобы небыло никаких повыше-пониже, а было строго — ровненько :).
            • +1
              А вы никогда не сталкивались с такое вещью что требования со временем могут меняться?
  • +32
    4 способа не вылазить из-за компа теплым июльским вечером…
  • +2
    Может чего-то не понимаю, но чем table плох? Тем более, что в первом примере, если DIV заменить на TABLE, UL на TR, а LI на TD, получится классическая табличная конструкция. И не надо никаких CSS-извращений, учитывая, что TABLE совместим со всеми даже самыми древними браузерами и, скорее всего, с большинством тех, которые появятся в следующие 10 лет.
    • +1
      Просто дань моде, я считаю. Все должно быть оправдано, и нормальная смешанная верстка ничем не хуже той где только одни слои.
      • –1
        Я про что и говорю. Главное конечный результат, оптимальный и универсальный (учитывая разношерстность вкусов юзеров в отношении средств веб-серфинга). А валидность или кошерность кода — это так…
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Какие продвинутые у Вас заказчики ;-)
          • 0
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Ну этот просто жадный какой-то :)
                • 0
                  50 баксов за вёрску, прикручивание к CMS, установку на хостинг и настройку этой CMS — это не жадный — это кто-то привыкший к халяве :)
                  P.S. Соответственно халявную работу и получит...
            • 0
              Жадность фраера погубит.
            • –1
          • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Попробуйте сделать таблицей правую колонку слева, а левую справа. Ведь в коде должен идти сначала основной контент, а потом дополнительная колонка, а на дизайне дополнительная колонка часто находится слева.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          А зачем вставлять в контент картинку шириной «которая не вписывается в контент»? Все размеры картинок в контенте изначально придумывает и утверждает дизайнер, а потом программно реализуется ресайз, если постинг картинок идёт извне. Если нужна большая картинка, то делаем popup по ссылке с картинки в контенте.

          Где вы видели нормальный сайт с картинками, когда загруженные картинки распирают всю вёрстку? Ваш случай не реальный при грамотной разработке сайта.
    • +1
      Почему так сложно понять то, что результат должен удовлетворять одному условия — только «div»ное решение. Не нужно тут вспоминать про таблицы. Есть люди которые ими не хотят верстать и то, что для вас считается быстрым решением таблицами в данном случае не подходит из-за принципиальных взглядов.
      • –1
        В таком случае топикстартер должен был сделать соответствующую пометку, мол, «исключительно для дивных верстальщиков», а раз пометки нет, значит рассматривается общий случай.
        • 0
          это бюрократия, нормальные люди и без таких пометок понимают такие простые истины.
          • +1
            Нормальные люди не понимают таких упёртых «дивных» верстальщиков, они также не понимают упёртых «табличников», а истина где-то посередине… :)
            • 0
              дело не в «упёртосте», дело в задаче. Задача сверстать используяю только блоки и css. Никаких эмоций в сторону таблиц и не таблиц, просто задача сделать так.
              • 0
                Может, просто задача неправильно поставлена? :)
                • +1
                  Уже не смешно. Задача иметь полный доступ над оформлением страницы. Использование таблиц мешает выполнению этой задачи. Не нужно цепляться для чего зачем почему. Есть задача есть решение.
    • +4
      Таблица (из лат. tabula «доска») — способ передачи содержания, заключающийся в организации структуры данных, в которой отдельные элементы помещены в ячейки, каждой из которых сопоставлена пара значений — номер строки и номер колонки. Таким образом устанавливается смысловая связь между элементами, принадлежащими одному столбцу или одной строке.

      ©
      Вот представьте в недалеком будущем интеллектуальные устройства, которые могут не только собирать и хранить информацию, но и анализировать ее (компьютеры, отвечающие на вопросы из любой фантастической книги). Из-за «табличных верстальщиков» подобные программы будут сталкиваться с большими трудностями в поисках упомянотой выще смысловой связи информационных элементов по горизонтали и вертикали.

      Т.е. «табличные верстальщики» должны четко отдавать себе отчет в том, что то, что они делают — это не таблицы. У данных в ячейках нет никакой смысловой связи между собой, у колонок и строк нет и не может быть обозначения. Все системы, пытающиеся рассматривать такую «таблицу» как таблицу будут сталкиваться с неразрешимыми проблемами.

      В настоящем проблемы другие: технические (выше упомянуто не раз), адаптация для разных устройств. Знаете, html можно читать не только браузером ПК/КПК или мобильника, но также принтером, генератором голоса и черти знает еще чем — все кроме браузера ПК представит информацию не так, как хотелось бы получателю. «Табличные верстальщики» — отцы основатели совершенно идитских «версий для печати», «версий для КПК» и проч. и проч. — в HTML это ничего не нужно. Одна и та же правильно сверстанная страница прекрасно должна и может быть воспроизведена любым устройством.
      • –1
        По моему, уже сейчас поисковики вполне себе прилично отделяют зёрна от плёвел. Если в недалёком будущем ИНТЕЛЕКТУАЛЬНЫЕ устройства не смогут делать того, что сейчас умеют тупые боты, то нафиг нам такие устройства?

        Почему это у колонок при табличной вёрстке нет своего обозначения и назначения? Очень даже есть. В простом варианте: меню, контент, всяка-бяка — чем не разделение по смыслу?

        Создание разных версий сайта для разных устройств, например КПК. Подразумевается, что для этой версии нужно максимально облегчить и упростить страницу. Средствами CSS я действительно могу скрыть графику и ненужные блоки информации, но они ведь скроются только визуально, а реально всё равно будут грузиться (или я заблуждаюсь в этом вопросе?). С жабаскриптами вообще непонятно, они вроде бы при помощи CSS не отрубаются. Т.е. где выигрыш то? Разработчику конечно легче, но вот посетитель в данном случае проигрывает. А сайты, вообще-то, не для разработчика делаются, а для посетителей.
        • +2
          По моему, уже сейчас поисковики вполне себе прилично отделяют зёрна от плёвел. Если в недалёком будущем ИНТЕЛЕКТУАЛЬНЫЕ устройства не смогут делать того, что сейчас умеют тупые боты, то нафиг нам такие устройства?

          Не соглашусь. Все, что сейчас умеют «тупые боты», это находить в сети ответ другого человека на ваш вопрос путем соовпадения слов (утрированно). Сами ответить на него они не могут.

          Почему это у колонок при табличной вёрстке нет своего обозначения и назначения? Очень даже есть. В простом варианте: меню, контент, всяка-бяка — чем не разделение по смыслу?

          Вы не поняли, что я сказал. В таблицах (настоящих), есть смысловая связь по каждой вертикали и каждой горизонтали. Посмотрите на таблицу, расшифровкой значения каждой ячейки является пересечение колонки и ряда. Из этой таблицы очевидно, что метр — русское название единицы измерения длины (в системе Си — с учетом контекста документа). Это — таблица, а «меню контент, всяка-бяка» — это, простите, детский лепет (меню — это пересечение какой колонки с каким рядом?).
          Создание разных версий сайта для разных устройств, например КПК. Подразумевается, что для этой версии нужно максимально облегчить и упростить страницу. Средствами CSS я действительно могу скрыть графику и ненужные блоки информации, но они ведь скроются только визуально, а реально всё равно будут грузиться (или я заблуждаюсь в этом вопросе?)

          Вы опять меня не верно поняли. Для разных устройств может быть принципиально разное расположение элементов, принципиально разная визуальная структура документа. Именно поэтому половина ру(?)нета завалена дубликатами информации «для печати» и «для кпк».

          Насчет загрузки — невидимые картинки (в общем случае — элементы дизайна) грузиться не будут. А размер HTML-кода не так важен — он чаще всего является небольшой частью от всего документа, ну и про round-trip-time забывать не стоит.

          С жабаскриптами вообще непонятно, они вроде бы при помощи CSS не отрубаются.

          Про js я ничего не говорил.
          • 0
            Блин, как же вы (не вы конкретно) надоели прикапываться к слову «таблица». Ну переименуйте вы «таблицу» в «сетку», всё больше ничего не меняйте. Вас идеологически устроит тогда вёртка «сетками»?
            • 0
              Вас идеологически устроит тогда вёртка «сетками»?

              Да, как только «сетки» будут добавлены в HTML.

              А до тех пор, когда вы (не вы конкретно) пишете — вы сообщаете пользователю вашего кода о том, что это таблица, со всемы вышеизложенными вытекающими.

              ps: я прекрасно понимаю, что переубедить вас невозможно.
              • 0
                А до тех пор, когда вы (не вы конкретно) пишете <table>*
                скушалось.
              • 0
                Когда в стандарт добавляли таблицы, в составе рабочей группы явно небыло верстальщиков и дизайнеров — програмисты, учёные, разработчики браузеров и т.п., а вот людей, которые собственно и будут работать с этим стандартом в группе небыло. Именно по этой причине появились таблицы и не появились сетки (хотя их сплош и рядом, насколько мне известно, используют в полиграфии). О верстальщиках и дизайнерах более-менее серьёзно вспомнили только сейчас, до этого же приходилось выкручиваться создавая монструозные конструкции.

                Почему сетки не появились в стандарте? Да всё просто, просто победили сторонники блочной модели, хотя очевидно, что оптимальный вариант был бы — сетка+блоки.
  • +13
    Действительно лучше заменить на таблицу, а в оставшиеся часа 4 попить пиво :-)
  • 0
    Спасибо.
  • +4
    Последний способ ничем не отличается от способа с использованием таблиц — он не семантичен, в нем нагромождения кода, он трудно читаем.
    Забыт еще пример с использованием бордеров у центрального блока, равным ширинам сайдбаров, и абсолютным позиционированием этих самых сайдбаров.
    • +1
      Ну тогда еще можно способ с
      padding-bottom: 32768px;
      margin-bottom: -32768px;
      у колонок + внешний див с overflow: hidden; :)
  • 0
    Самый правильный способ — js: не портим разметку ничего не значащими блоками, работаем везде, просты и понятны.

    А аргумент с отключением не катит ни разу, покажите мне сайт из топ 100 без него? ну не считая поисковой строки гугла
    • 0
      Мне тоже способо с использованием JS больше нравится. Его и использую если нужны колонки одинаковой высоты.
      • 0
        опечатался… «способ»
      • 0
        А что если контент меняется в одной из колонок? А что если это происходит регулярно? А что если это какой нибудь контент который неизвестно когда загрузиться ( ютуб какой нибудь ). Придётя опять выравнивать. А если эта структура (колонки) является частью какого то ещё блока и от его высоты зависит ещё какая-нибудь колонка. Её тоже надо жаваскриптом выравнивать.
        Выравнивать колонки скриптом — балаган.
    • 0
      Тупой способ, 70 Кб jQuery подключать только ради колонок. И вообще, для верстки есть css. Уж логичней тогда сделать через display:table, а для криворуких браузеров — маленький скриптик/behaviour на пару килобайт.
      • 0
        Ну так не обязательно jq, лучше самому написать… хотя фреймворки и так почти везде используются

        С css появляется хлам в разметке и количество css немаленькое и непонятное
      • +1
        Поэтому, кстати, рекомендуется подключать jquery прямо с google.code.
        Если бы большая часть веб-мастеров делали так, то тогда бы фреймворк на пользовательской машине загружался бы один раз, а не для каждого сайта заново.
        • 0
          На Google Code ограничена исходящая скорость. также, на GC нельзя задать произвольные заголовки для принудительного кеширования. Если GC будет тормозить, или ляжет, в ИЕ будет белый экран вместо сайта, а в Опере сайт загрузится, но не будут работать ссылки.
  • +2
    Была бы интересна комбинированная реализация первого и второго способа — для всех display: table, для IE 7 и 6 — колонки одинаковой высоты с помощью JS.
    • +2
      напишу сегодня ночью, давно собирался, но эта статья видно — знак)
      что интерестно, с display: table-cell есть проблемы в FF3 (в FF3.5 исправили), я писал про это в микрохабре на большую статью всё времени небыло, да и FF3.5 не было тоже)
      • +1
        Надо еще обязательно рассмотреть способ эмуляции поведения «vertical-align: middle» в IE.
        • 0
          спасибо, будет!
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          да-да-да)
        • 0
          причём если задавать ширину, то всё ок
          проблема если первая ячейка — резиновая, а вторя — фиксированная.

          со второй загрузки всё ок, но второй раз такой сайт уже не загрузят)

          загрузил старый код в 3.5 — хм, интерестно, в 3.1beta было нормально, а в 3.5 — опять тот же прикол.
          ну да посмотрю варианты)
          • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Может скриптом попробовать заменять дивы на td,tr,table?
        В этих тегах у IE реализованы все необходимые свойства…
        • 0
          я пошёл путём задавания высоты через одноразовый expression,
          но как выше написал — основная беда пришла оттуда, где не ждал — от FF.
    • 0
      Только JS в этом случае лучше не в скрипте, а в expression'e писать.
      Как-то вот так: height: expression (parentNode.Height+'px')
  • 0
    Чем плохи таблицы — попробуйте быстро поменять местами пару колонок.
    А так-то конечно, ни тебе забот о выравнивании, ни о высоте колонок…
    • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      А часто вы такую операцию делаете на рабочем сайте?
  • +1
    В примере с JS нет ни одного скрипта. А по сути: что будет, если пользователь увеличит размер шрифта? Поставите таймер, который будет постоянно проверять размер, создав тем самым ненужную нагрузку на клиента?
  • НЛО прилетело и опубликовало эту надпись здесь
  • +8
    Верной дорогой идём, товарищи.
    • 0
      Вы случаем подписи к картинкам не перепутали?)
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Кто вам сказал, что таблицами верстать проще? Я, например, не учился верстке таблицами, с ними постоянно проблемы, например, ширина колонки может самопроизвольно увеличиваться (если общ. ширина таблю выйдет больше суммы ширины столбцов), или высота — непонятно как для 3строчной таблицы задать фиксированныю высоту шапки и подвала, а средний ряд сделать высотой 100% — (подвал + шапка). Непоянтно, как задать фон картинкой на элементе tr (n к сафари применяет его не к tr а к каждому td отдельно). Проблемы с вставкой контента innerHTML. ячейку нельзя вырвать и сделать абсолютно позиционированной. td может быть произвольно растиянута находящимся внутри контентом (даже если он засунут в див с overflow:hidden, он зараза все равнорастягивает ячейку).

          Проблема со стилями: задаешь стиль для таблиц в контенте, он применяется к таблице, использованной для верстки, и наоборот, жутко бесит.

          Сложно сделать стили для печати, или для узкого экрана.

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

          И еще 1 плюс дивной верстки: на редкость логичный код:

          > div id=wrapper
          > div id=content
          > h1 Заголовок /h1
          > p текст /p
          > table табличка /table
          > ul список /ul
          >
          > div id=menu
          > ul меню /ul
          >
          > div id=footer
          > address футер /address
          > div id=search
          >
          > div id=header
          >
          >… тут всякий ненужный хлам

          Такой HTML отлично смотрится даже без стилей (и в браузере links :)), к нему легко добавлять стили для печати, и просто приятнее работать.
          • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    четвёртый способ чем-то напоминает способ Сергея Чикуёнка — chikuyonok.ru/2009/06/float-columns/, но последний всё же более универсален и имеет больше плюсов при той же, имхо, сложности кода…
  • –1
    А оно того стоит?
    Если вам понадобилось создать три колонки одинаковой высоты, то нужно пятьсот раз подумать, почему бы не использовать таблицы.
    И здесь именно тот случай, когда с таблицами кода будет меньше. Хотя это зависит от конкретной задачи.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Исправьте, пожалуйста: ссылки к примерам 2 и 3 перепутаны. Там, где «Искусственные колонки» в примере JS, а где JS в примере наоборот страница с картинкой колонок в фоне.
  • 0
    Способ с использованием JS, имхо, вообще не катит для большинства сайтов.
    Я за таблицы для таких случаев.
  • 0
    Ну неужели блоки с текстовой информацией обязательно надо раскрашивать? А если ракрасили, так уже непременно стоит растянуть до пола?

    Симетрия в дизайне — зло.
    • 0
      Глазу приятнее видеть колонки одинаковой высоты, чем «зубья» или «пистолет»—в том-то вся и беда.
    • +1
      Зло — это когда что-либо обзывают однозначным злом
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Полностью от таблиц отказываться нельзя, к сожалению(ну, кроме как, не верстать такие макеты). Да, мы должны верстать семантично, но что поделать, если без таблиц не обойтись в таких ситуациях? Множество примеров, которые я видел, несемантичны и иногда даже трудны в понимании.
  • +3
    Бред. И где решение?

    1-ый способ: в ИЕ не работает — уже отпадает
    2-ой способ: JS — во-первых, может быть отключен, во-вторых, данные могут динамически подгружаться, придется каждый раз через JS высоту дергать :(
    3-ий способ: не всегда одним фончиком можно отделаться.
    4-ый способ: нахера такая херня с кодом, который не факт, что будет работать на всех платформах-браузерах, если есть старый добрый

    padding-bottom: 2000em;
    margin-bottom: -2000em;
    и для внешнего дива overflow: hidden;

    В общем, статья не актуально, полезной информации не несет.

    • 0
      Согласен по всем пунктам.
  • 0
    В первом способе, там где недостатки, есть такая строчка:
    >когда IE7 станет новым IE6

    Насторожило. Видимо, очепятка? Или тут есть какой-то глубокий философский смысл…
    • +1
      Имеется ввиду что IE7 будет так же распространен как IE6 сейчас.
      • 0
        Мне тоже показалось, что имелось в виду подобное. Но фраза странная, а автор пока молчит.
  • +1
  • 0
    Не понимаю, столько лишнего кода и потраченого времени. Правда сделано без таблиц… ну и что? Какая от этого польза — потраченое время? Бъло бы короче и быстрее чем таблицы — тогда бы было хорошо и полезно. Реальной пользе (кроме понтоватся) от этого нет
  • 0
    faux-colums поддерживает резиновую вёрстку, разве нет?
  • –2
    Зачем вообще эти килотонны кода? Чтобы иметь три, четыре, сколько-угодно дивов одинаковой высоты, достаточно указать всем float:left. О чём все это?
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Разумеется во всех браузерах вот с таким <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" «www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> доктайпом
        • НЛО прилетело и опубликовало эту надпись здесь
          • –1
            Ну пример я искать\делать не буду. А вот вопрос про разный цвет фона забавляет, как будто это в принципе возможно назвать задачей вообще.
            • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    я 10 минут тупил насчёт последнего способа и понял, только просмотрев код примера по ссылке. этого не потребовалось бы, если бы автор правильно расставил табуляции в примере:

    
    <div class=”rightback”>
    	<div class=”contentback”>
    		<div class=”leftback”>
    			<div class=”leftsidebar”>…Lots Of Content…</div>
    			<div class=”content”> …Lots Of Content…</div>
    			<div class=”rightsidebar”> …Lots Of Content…</div>
    		</div>
    	</div>
    </div>
    


    так понятнее, неправда ли? :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.