• Две float-колонки одинаковой высоты

    Хочу поделиться своим способом верстки двухколоночных макетов, где обе колонки должны иметь одинаковую высоту. Тема, казалось бы, уже избитая: любой западный (а с ними и отечественный) ресурс выдаст вам с десяток способов сделать это. Но с одим нюансом: это будут макеты-«кирпичи», то есть макеты фиксированной ширины. Предел возможностей — одна растягивающаяся колонка. Я покажу как сделать две (и более) растягивающиеся колонки, причем это будет не эмуляция в виде толстого цветного бордера, а именно полноценная колонка, которой можно задать, например, свою фоновую картинку.

    Правильный способ

    Наиболее правильным на сегодняшний день способом верстки многоколоночных макетов является использование CSS-свойства display: table-*, например, вот так:

    <div style="display:table-cell;width:50%">
    	<div style="display:table-row">
    		<div style="display:table-cell;background:red">column 1</div>
    		<div style="display:table-cell;background:blue">column 2</div>
    	</div>
    </div>
    

    Проблема в том, что это не работает в IE6/7, которые составляют значительную долю рынка браузеров. Что ж, придется воспользоваться альтернативным способом.

    Альтернативный способ

    Как обычно, сначала разберем проблему на составляющие. Предположим, у нас есть двухколоночный макет, первая колонка шириной 25% от контейнера, а вторая — 50%:

    col1

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

    Наиболее очевидным и стабильно работающим способом создания колонок из блоков является использование CSS-свойства float. Однако, как вы уже поняли, это не решит нашей проблемы с колонками разной высоты:

    col2

    Какие свойства есть у float-блоков? Они находятся в потоке, значит, могут влиять на высоту контейнера. То есть если мы обрамим блоки контейнером и создадим у него правильный контекст форматирования (либо через clear-элемент, либо через overflow: hidden), наш контейнер примет высоту наибольшей колонки:

    col3

    А если мы добавим не один, а два контейнера, то оба они будут высотой с наибольший блок:

    col4

    Обращаем внимание на размеры колонок: первая 25%, вторая 50%. То есть вторая колонка ровно в 2 раза больше первой. Соответственно, если первому — внешнему — контейнеру мы задаим ширину в 25%, а второму — внутреннему — 200% (две ширины внешнего контейнера, что будет соответствовать 50% относительной всей страницы) и сместим его на ширину контейнера вправо, мы получим подобие того, чего хотим добиться:

    col5

    Осталось разобраться с текстовыми колонками. У нас появился новый контейнер, от которого рассчитываются размеры колонок. Так как левая колонка должна быть шириной в 25% от страницы, а ширина внутреннего контейнера равна 50% от страницы, то новая ширина колонки будет равна 50% (50% × 0.5 = 25%). Сама колонка не должна влиять на ширину, но все еще должна быть в потоке, поэтому подавляем влияние ширины колонки на поток с помощью margin-right:-100%, а сам элемент смещаем влево на половину ширины контейнера, то есть на 50%. Получаем именно то, что нам нужно:

    col6

    А вот сам HTML-код, с помощью которого реализуется эта конструкция:

    <style type="text/css">
    	.col-wrap1 {
    		width:25%;
    		background:blue;
    	}
    
    	.col-wrap2 {
    		width:200%;
    		margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
    		position:relative;
    		left: 100%;
    		background:red;
    	}
    
    	.col1 {
    		float:left;
    		width:50%;
    		margin-right:-100%;
    		position:relative;
    		left:-50%;
    	}
    
    	.clear {
    		clear:both;
    		font-size:0;
    		overflow:hidden; /* тройной презерватив для IE */
    	}
    </style>
    <div class="col-wrap1">
    	<div class="col-wrap2">
    		<div class="col1">left column</div>
    		<div class="col2">center column</div>
    		<div class="clear"></div>
    	</div>
    </div>
    

    Резюмируя все вышесказанное: я создал два контейнера, который являются дублерами основных колонок, и раздвигаются по высоте этими самыми колонками. Остается добавить, что этот способ является более гибким, чем использование CSS-свойств display: table-*, потому что сами колонки можно перемещать с помощью свойств top и left. Чтобы продемонстрировать потенциал этого решения, я сделал специальный пример. Обратите внимание, что у каждой колонки есть свой бордюр и фоновая картинка, выровненная по правому нижнему краю, что в принципе не возможно в других известных способах.

    На основе этого способа можно создать и больше растягивающихся колонок одинаковой высоты. Пример: сайт ВТБ24. Там три колонки одинаковой высоты; верстка осложняется тем, что первые две колонки должны быть в общей рамке, между которыми есть вертикальный разделитель. Когда я готовился к одному из мастер-классов, в одной книге про «качественную верстку» (естественно, западного автора), я прочил, что такое реализовать невозможно 🙂 Для меня это стало очередным подтверждением, что там не умеют верстать качественные растягивающиеся сайты.

    Два слова о верстке макетов

    На первый взгляд может показаться, что этот способ слишком специфический и подходит далеко не для каждого макета. Это не так. Основной трюк заключается в том, чтобы правильно определить модульную сетку и ширину колонок и контейнеров. Пока дизайнеры не слышат, признаюсь: первое, что я делаю при верстке макета — удаляю гайды, которые нарисовал дизайнер. Они мне нужны лишь для того, чтобы понять, как должны выравниваться блоки, саму модульную сетку я делаю на основе тщательного анализа макетов (на это может уйти целый рабочий день). После этого 7 колонок превращаются в 2 контейнера-дублера с 2…4 колонками в каждом. Может, потом подробнее опишу этот момент, пока могу дать общий совет, старайтесь подбирать такие ширины контейнеров и колонок, чтобы они делили 100 без остатка, а именно: 50%, 25%, 20%, 10%, 5%, 2%, 1%. Тогда вы сможете без особых хлопот выравнивать блоки по горизонтали в вертикали в независимых контейнерах.

    Метки: , , ,
  • 172 комментария

    1. remal
      16 июня 2009

      В избранное! Правда я обычно не парюсь и делаю таблицей в таком случае. Ибо время на разработку, тестирование и фикс багов куда дороже мифической симантики.

    2. Vladimir
      16 июня 2009

      можно избавиться от блока с помощью следующего цсса:
      /* Hides from IE-mac */
      .clearfix {display: inline-block; clear: both}
      .clearfix {display: block}
      /* End hide from IE-mac */
      .clearfix:after {content: «.»; display: block; height: 0; clear: both; visibility: hidden}

      не уверен на счет хаков для маковского IE, но так проверить их возможности не было решил оставить (код не мой, нашел его где-то, непомню)

    3. SlamJam
      16 июня 2009

      Вы гений! Я бы никогда сам до такого не дошел. А решение то на поверхности лежало!

    4. 16 июня 2009

      /* тройной презерватив для IE */
      это запомню, в мемориз как ту говорят, собирался искать решение этой проблемы на днях, а тут бац %)
      грейт джоб! спасибо!

    5. Сергей Чикуенок
      16 июня 2009

      Ибо время на разработку, тестирование и фикс багов куда дороже мифической симантики.

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

      А для всяких внутренних мелких блоков — да, если за 20 минут не получается сделать кросс-браузерное решение, то использую таблицы.

      можно избавиться от блока с помощью следующего цсса:

      Да, есть такой способ, называется clearfix. Только для меня он не всегда работает должным образом из-за макетов, которые приходится верстать, поэтому использую старый добрый clear-элемент либо overflow: hidden.

    6. kizu
      16 июня 2009

      О, круто-круто, надо будет поэксперементировать с этим методом побольше, спасибо 🙂

    7. sparrow
      16 июня 2009

      в IE 6 наблюдается дрожание левого края левой колонки при сжатии окна, опять наверное из-за неправильного расчета ширины.

    8. Сергей Чикуенок
      16 июня 2009

      Да, есть такое, из-за неправильного округления дробных значений. По-моему есть способ от этого избавится, надо немного покопаться. С другой стороны: так ли это важно для конечного пользователя?

    9. sparrow
      16 июня 2009

      может быть, это некритично, просто неприятный эффект

    10. Pilgrim
      16 июня 2009

      Недавно столкнулся с похожей проблемой. Спасибо за интересное решение.

    11. remal
      16 июня 2009

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

      А для всяких внутренних мелких блоков — да, если за 20 минут не получается сделать кросс-браузерное решение, то использую таблицы.

      Тут полностью согласен! Придерживаюсь такого же подхода.

      А по поводу clearfix, я использую такой:#content:after { display: block; float: none; clear: both; content: ‘ ‘; height: 0; overflow: hidden; line-height: 0; font-size: 0; }
      #content { *overflow: visible; *zoom: 1; }
      возможно, что-то тут лишнее:)

      ЗЫ: было бы очень хорошо, если бы ты написал где-нибудь какими тегами можно пользоваться

    12. Roman
      16 июня 2009
    13. Сергей Чикуенок
      16 июня 2009

      Еще один вариант

      А теперь попробуйте добавить бордюр колонкам или прижать фон к любому из четырех углов 🙂

      А по поводу clearfix, я использую такой

      Я не использую clearfix в основном потому, что иногда на некоторых страницах сайтах появляются дополнительные колонки, после чего приходится вводить дополнительные режимы, типа «вот тут после #content оборвать поток, а тут после #col3».

      ЗЫ: было бы очень хорошо, если бы ты написал где-нибудь какими тегами можно пользоваться

      Можно пользоваться всеми тэгами, описанными в спецификации HTML 🙂 Ну еще и <noindex>

    14. remal
      16 июня 2009

      Можно пользоваться всеми тэгами, описанными в спецификации HTML

      <pre> не работает

    15. Сергей Чикуенок
      16 июня 2009

      А, имеется в виду какими тэгами можно пользоваться при комментировании? Сам не знаю, надо доки по вордпрессу почитать

    16. xexe
      16 июня 2009

      ох тыж матерь Федькина! Сколько у вас ушло времени на то, чтобы дойти до этого?

    17. 16 июня 2009

      Я не пользуюсь clearfix’ами, т.к. отказался от флоатов в пользу inline-block’ов для IE6 и IE7 (это конечно псевдо-inline-block, но всё-же работает как надо), а для нормальных браузеров делаю колонки с помощью table-*
      Попробую твой метод со своим подходом на досуге и отпишу нормально или нет : )

    18. 16 июня 2009

      *правда наверное придётся отказаться от иерархической вёрстки : (

    19. 16 июня 2009

      большая статья

    20. Сергей Чикуенок
      16 июня 2009

      Сколько у вас ушло времени на то, чтобы дойти до этого?

      Не знаю, как-то само сабой получилось. Иногда бывает так, что решения «невыполнимых» задач приходит сразу, иногда нужно день-два экспериментов.

    21. Сергей Чикуенок
      16 июня 2009

      Так как на Хабре подняли вопрос «а нафига вообще это нужно, таблицы проще», а аккаунта у меня там нет, отвечу здесь.

      Итак, ответ: гибкость. Таблицы — жестко заданная структура, которую практически невозможно изменить. Ячейки нельзя перемещать и менять местами с помощью СSS. Зачем все это нужно? Ну попробуйте сделать на таблицах трехколоночный сайт, который будет одинаково хорошо отображаться в браузере, при печати и на КПК.

    22. 16 июня 2009

      Обычно решение верстать таблицами возникает у тех, кто иначе просто не умеет. Сам раньше так делал : D

    23. remal
      16 июня 2009

      Я не пользуюсь clearfix’ами, т.к. отказался от флоатов в пользу inline-block’ов для IE6 и IE7 (это конечно псевдо-inline-block, но всё-же работает как надо), а для нормальных браузеров делаю колонки с помощью table-*

      А какой смысл тогда в дивах? Симантика ради симантики пользы не принесет.

      Ну попробуйте сделать на таблицах трехколоночный сайт, который будет одинаково хорошо отображаться в браузере, при печати и на КПК.

      А какие трудности могут возникнуть?

    24. Сергей Чикуенок
      16 июня 2009

      А какие трудности могут возникнуть?

      Например, у КПК сильно ограничен размер экрана, поэтому меню там должно быть не сбоку, а сверху/снизу. Мне в свое время корпоративные клиенты весь мозг выели на тему того, что у шефа на ВинМобайл и прочих Симбианах сайт как-то криво смотрится. К счастью нужно было всего-лишь потюнить один CSS-файл, а не переделывать весь сайт.

      Версия для печати — аналогично, все определяется макетом, который нарисовал дизайнер.

    25. 16 июня 2009

      Спасибо за вариант. А с бы попробовать с 3 колонками?

    26. 16 июня 2009

      Да, есть такой способ, называется clearfix. Только для меня он не всегда работает должным образом из-за css.

    27. ecl
      16 июня 2009

      >>Так как на Хабре подняли … а аккаунта у меня там нет
      давайте я вам вышлю инвайт, такие писатели там нужны 🙂

    28. 16 июня 2009

      Всегда вот удивлялся таким вот находкам.
      Сколько не делал всего на дивах, никогда не мог придумать колонки одного размера.
      всегда приходилось запихивать все в таблицу. Внутрь.
      Осталось попробовать все это на 4 и 5 колонках ))

    29. 16 июня 2009

      Не pixel-perfect (от нюансов округления процентов без применения табличной модели не спрятаться). Но иногда приходится прибегать, да.

    30. Сергей Чикуенок
      16 июня 2009

      А с бы попробовать с 3 колонками?

      Три колонки по такой же, но чуть более сложной, схеме есть на сайте ВТБ24

      PS: всем спасибо, теперь у меня есть аккаунт на Хабре

    31. 16 июня 2009

      Сергей, хороший метод. Но если не нужна кромка по периметру и картинка заднего фона для div’ов, то 5-4-3-2-х колоночные варианты Мэтью, ссылку на которые указал Роман, очень даже справляется со своей задачей, учитывая, что вертикальный пиксельный разделитель можно создать с помощью фоновой картинки.

      Будем ждать 5-ти колоночный вариант с фоновыми картинками и с вертикальными разделителями между каждой колонкой 😉

    32. Антон
      16 июня 2009

      Вариант интересный, однако если поддержка мобильных устройств не требуется (а иногда для соблюдения сроков не требуется даже версия для печати), то таблица выглядит более разумно.
      Здесь и на хабре пишут, что таблицами пользуются те, кто не может сделать блоками, в то время, как блоками можно сделать все. Это не так. У меня есть макет, который блоками не реализуется (во всяком случае несколько дней размышлений ничего не дали). И дело не в его сложности (он как раз достаточно прост), а в поведении сетки при растяжении и сжатии, добиться которого без использования таблиц невозможно (применение JavaScript’а, естественно, не рассматривается).

    33. Сергей Чикуенок
      16 июня 2009

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

    34. 16 июня 2009

      Сколько полезностей сразу.. надо бы проверить метод в действии

    35. 16 июня 2009

      Кстати, а, может, для IE просто использовать expression’ы для установки высоты? Да, не супер красиво. Да, нюансов тоже хватает. Но зато мало извратов с позиционированием.

      —-

      По поводу таблиц и семантики в частности могу сказать что HTML — не XML. Семантикой тут пахнет только с натяжкой. Очень часто приходится создавать нечто типа <div id=»main-menu-container> только ради оформления. Но при этом о каком отделении представления о содержании можно говорить в таких случаях?
      Везде нужно знать меру. И понимать где оправданы лишние часы на дивную верстку, а где нет.

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

      Религия вокруг валидатора и симантичной верстки была, имхо, создана только ради поднятия з/п верстальщикам. Имею ввиду именно религию, доходящую до фанатизма, а не вполне здравые идеи с пониманием ограничений HTML и компромиссами между временем создания и красотой кода.

    36. 16 июня 2009

      Очень граммотно придумано! Надо будет как-нибудь где-нибудь применить.
      Кстати, а как вам вот такой вариант решения подобной проблеммы: http://www.cssplay.co.uk/layouts/flexible-3column.html

    37. Сергей Чикуенок
      17 июня 2009

      Кстати, а, может, для IE просто использовать expression’ы для установки высоты?

      Можно, только экспрешены нужно держать под контролем. Я считаю, что если можно обойтись без них — лучше обойтись, больше останется.

      Религия вокруг валидатора и симантичной верстки была, имхо, создана только ради поднятия з/п верстальщикам.

      Вряд ли, работодатели в этом не разбираются. Я подозреваю, что эту религию создали те, кто кроме как «верстаю валидно и семантично» ничего больше сказать о себе не может. Да и показать тоже.

      Кстати, а как вам вот такой вариант решения подобной проблеммы

      Вполне неплохой, но остаются проблемы с бордерами и фоном.

    38. 17 июня 2009

      А какой смысл тогда в дивах? Симантика ради симантики пользы не принесет.

      remal, во-первых: «сЕмантика» ; ), а во-вторых: на хабре я уже писал, что, на мой взгляд, главной причиной использования блоков для вёрстки, вместо таблиц, является особенность рендеринга страницы во-время загрузки: пока строка таблицы полностью не загрузится — она не отобразится (или даже вся таблица) — это неприемлемо
      Ну и «боремся»-то мы с отсталыми браузерами, которые не умеют display: table, так что зачем это решение с инлайн-блоками применять ко всем браузерам?

      Вот соберусь с мыслями и напишу пост насчет предвзятого отношения к табличной верстке

      Было бы интересно : )

    39. 17 июня 2009

      Слушай, а сделай, чтобы все имена синеньким были.
      P.S. На все твои изыскания, блин, времени никак не хватает.

    40. Pchelobej
      17 июня 2009

      Единственный минус проявляется, если в колонку кто-то нечаянно вставит картинку или таблицу шире самой колонки.

      Понятно, что это неправильно, нужно следить за контентом. Но когда делаешь сайт назаказ, а наполняет его потом секретарша — довольно критично. Клиенту часто всё равно — семантично или нет. Таблицу в таком случае просто распирает в ширину, но ничто никуда не уезжает.

      Я вообще не защищаю таблицы, я даже против них, но вот такие насущные проблемы существуют.

    41. artoodetoo
      17 июня 2009

      Хорошая статья. Буквально вчера разбирался как в форумном движке PunBB 1.3 решали эту задачу для вывода комментария с инфой об авторе. Именно так и решено.
      Похоже вы изобрели способ заново независимо. Ведь это реально просто (когда знаешь).

    42. 17 июня 2009

      я у себя сделал лёгкий перепост, с ссылкой на тебя 😉
      ничего страшного?

    43. Сергей Чикуенок
      17 июня 2009

      Я не против перепостов, если сохраняется авторство

    44. 17 июня 2009

      remal, во-первых: «сЕмантика» ; ), а во-вторых: на хабре я уже писал, что, на мой взгляд, главной причиной использования блоков для вёрстки, вместо таблиц, является особенность рендеринга страницы во-время загрузки: пока строка таблицы полностью не загрузится — она не отобразится (или даже вся таблица) — это неприемлемо

      С русским туго, никакие спец курсы грамотного письма не помогали, а проверка орфографии в ФФ такого слова не знает…

      Не знаю кто как, но я уже давно не делаю сайты в расчете на модемы. Да, приятно когда страница очень быстро отображается. Но если дизайнер, не зная верстки, нарисовал макет, который был согласован с заказчиком, то зачастую проще сделать таблицой.
      А то верстаешь этот макет дивами в ФФ, проверяешь в IE — ппц. Фиксишь баги IE, появляются в Опере. Фиксишь там — привет еще где-нибудь. Один раз так потратил 2 дня. Потом за час сделал таблицей. Второй раз повторять такую ошибку не хочется.
      Ну и, конечно, от бюджета проекта и адекватности заказчика многое зависит.

      И вообще я не верстальщик, а программист. Я лучше сделаю один star property hack для IE, чем буду подключать отдельную CSS таблицу при помощи условных комментариев. CSS будет невалиден, зато с ним будет куда как проще работать.

    45. Torbik
      17 июня 2009

      Изящно!

      Я когда-то столкнулся с подобной задачей, и, чтобы не придумывать как это сделать, просто посмотрел, как это сделано на digg.com. Правда там левая колонка фиксированная, но если firebug’ом задать ширину в %, то всё будет работать.

    46. 17 июня 2009

      красота! Сергей, а существует возможность получить то же отображение, только если блоки будут идти в обратном порядке? (левая колонка — внизу, правая — сверху)
      имею в виду, если она не очевидна…
      а то что-то не получается, сползает лефт-бар и всё тут (

    47. Сергей Чикуенок
      17 июня 2009

      Попробуйте эти стили прописать (прям в файербаге), должно получится:

      .col1 {
      	float:right;
      	left:-100%;
      	margin-right:-100%;
      	position:relative;
      	width:100%;
      }
      
      .col2 {
      	left:-50%;
      	margin-left:-60px;
      	position:relative;
      	width:50%;
      }
      

      Это довольно быстрое и грязное решение, если немного подумать, то можно сделать более красивое решение с меньшим количеством правил.

    48. Илья
      18 июня 2009

      Как быть, если один из дивов (например, красный) должен быть фиксированного размера (в пикселях)?

    49. Сергей Чикуенок
      18 июня 2009

      Пока не знаю, если придумаю — напишу

    50. Vii
      18 июня 2009

      У меня есть макет, который блоками не реализуется (во всяком случае несколько дней размышлений ничего не дали). И дело не в его сложности (он как раз достаточно прост), а в поведении сетки при растяжении и сжатии, добиться которого без использования таблиц невозможно (применение JavaScript’а, естественно, не рассматривается).

      А можно посмотреть на макет (не чтобы поехидничать, естественно, а просто очень уж охото мозги поломать после диплома ^^) Или хотя бы опишите в чем заключается сложность поведения сетки (надеюсь Сергей не будет против если мы немного переведем тему поста в более конкретные примеры ^_^)

    51. Сергей Чикуенок
      18 июня 2009

      Антон уже прислал мне макет, на мой взгляд, там все довольно просто. Как сделаю — покажу ему.

      У меня еще давно зреет мысль сделать что-то вроде домашек: давать какое-нибудь интересное задание, а потом сравнивать, кто его лучше сделал.

    52. 18 июня 2009

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

    53. Vii
      18 июня 2009

      У меня еще давно зреет мысль сделать что-то вроде домашек: давать какое-нибудь интересное задание, а потом сравнивать, кто его лучше сделал.

      Я обеими руками «за» Сам себе придумать интересные задания-разминки — сложновато.

    54. 18 июня 2009

      Поддерживаю идею с заданиями — свежие задачи рождают новые подходы даже к уже давно решенным проблемам.

    55. Илья
      19 июня 2009

      Метод супер, но есть одно большое НО! Если в макете колонки имеют не такое простое соотношение аля 1:2 (25%:50%). Да и редкость чтобы встречалось все так красиво.

      Пример: резиновый макет, golden ratio. Грубо: 62% : 37% (1% улетает на разрыв между колонками). Всё собственно. Применяем сей метод, точного позицинирования не добиться. Дробные части понимает только Firefox и IE начиная с 7 вроде. Chrome и Opera идут лесом. Да и сами дробные части довольно плохой тон. В итоге возвращаемся к JS 🙁

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

    56. Сергей Чикуенок
      19 июня 2009

      Илья, именно для этих целей я написал «два слова о верстке макетов» 🙂 Если покажете разметку, думаю, что смогу повторить это в рамках приведенного способа. Учитывая, что пиксельная точность для полностью растягивающегося макета (когда колонка должна быть ровно 62% от любой ширины, не пикселем меньше) — нонсенс.

    57. Илья
      19 июня 2009

      Да я обратил внимание на данное отступление. Тем не менее если кому-то интересен данный вариант

      [code]
      .col-wrap1 {
      float: left;
      width: 62%;
      position: relative;
      background: #53c4ff;
      }

      .col-wrap2 {
      float: left;
      width: 58%;
      margin-left: 103%;
      background: #ee4d4d;
      }

      .col1 {
      width: 171.8%;
      float: left;
      margin-left: -177.6%;
      }
      [/code]

      Проблема собственно не столько в том что нужно сделать макет px to px, cколько в том что рядом выше, находятся две колонки с параметрами width: 62% и 37%. И они то как раз тянутся от 100% контейнера. Сами по себе колонки отпозиционировать прям под ними вышло, а вот контейнер с текстом, который лежит в том что сдвигается от базового, не выходит, образуются отступы, которые и приходиться подправлять дробями.

    58. Сергей Чикуенок
      19 июня 2009

      Я поэтому и просил макет, потому что разметка будет другая. Если визуальный размер колонки 62%, то это совсем не означает, что в CSS будет это же значение.

    59. 20 июня 2009

      А то верстаешь этот макет дивами в ФФ, проверяешь в IE — ппц. Фиксишь баги IE, появляются в Опере. Фиксишь там — привет еще где-нибудь. Один раз так потратил 2 дня.
      Поэтому я и говорю, всегда проще сделать таблицей, если точно не знаешь как это сделать блоками : ) если бы знали, у вас бы всё было ок везде и таблицей вы бы делать не стали. В 90% случаев не приходится делать никаких особых хаков для ие, разве что поправить позиционирование или отступы какие-нибудь, которые легко пишутся в том же css с помощью * html для IE6 и *:first-child+html для IE7, а если уж совсем наплевать на валидность то с помощью подстановки _ и * перед атрибутами

    60. Макс
      22 июня 2009

      Я к такой колоночной верстке пришел в двухколоночных макетах, когда по каким то причинам нельзая использовать float и margin. Связано с тем, что в блоке, который обтекает 2-ой, нельзя свободно использовать clear. Когда столкнулся, решением для gecko/opera/safari стал table-*, а для IE стал, как ни странно, zoom.

      Волшебное, однако, свойство )

    61. Слава
      22 июня 2009

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

    62. 22 июня 2009

      Макс, zoom как раз и делает «инлайн-блоки» в IE. Вот подробнее про hasLayout
      Слава, для «нормальных» браузеров делаем table-* и одну из колонок фиксируем.

      Имеем HTML:

      Для IE6 и IE7 CSS будет таков:

      #container {
      width: auto;
      margin-left: 250px;
      }

      #fixed {
      display: inline;
      zoom: 1;
      width: 250px;
      margin-left: -250px;
      }

      #elastic {
      display: inline;
      zoom: 1;
      width: 100%;
      }

      Если фиксированная колонка будет справа, то margin-left везде меняем на margin-right. В принципе из этого примера можно легко сделать и трёхколоночный вариант, больше не пробовал, но кажется, что и с этим проблем не будет

      Для нормальных браузеров будет проще:

      #container {
      display: table;
      width: 100%;
      }

      #fixed {
      display: table-cell;
      width: 250px;
      }

      #elastic {
      display: table-cell;
      }

    63. 22 июня 2009

      HTML сожрался, вот ещё разок:
      <div id=»container»>
      <div id=»fixed»>
      </div>
      <div id=»elastic»>
      </div>
      </div>

    64. Vii
      22 июня 2009

      @artyv, а ты уверен, что если elastic будет длиннее чем fixed, последний будет растягиваться? (пост ведь про колонки одинаковой высоты)

    65. Борисов Алексей
      23 июня 2009

      filter в IE6 не показывает содержимое колонок. Это, пожалуй, самый серьезный недостаток.

    66. Сергей Чикуенок
      23 июня 2009

      Это стандартная проблема для IE: если элементу применили filter, то все, что выходит за пределы блока, не отображается. Если речь идет о наложении колонке полупрозрачного фона, то я решал эту проблему так: создаю отдельный блок для IE, который с помощью expressions растягивается по высоте на всю доступную ширину, и этому блоку задается filter. То есть получается как-бы отдельный слой. Плюс этого метода еще и в том, что не слетает сглаживание у шрифтов, так как фильтр накладывается на отдельный блок, а не на блок с текстом.

    67. 24 июня 2009

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

    68. ling
      1 июля 2009

      Сергей, способ изящен, нет слов.

      Не разобралась только с одним.. при соотношении 25/75 ширина левого текстового блока — 33% (нашла опытным путем).

      по тексту: «Так как левая колонка должна быть шириной в 25% от страницы, а ширина внутреннего контейнера равна 50% от страницы, то новая ширина колонки будет равна 50% (50% × 0.5 = 25%). »

      значит в моем примере 70% * 0,5 = 37.5%

      но все встает на свои места только при 33%

      Кто видит, где я ошибаюсь?

    69. ling
      1 июля 2009

      опечаталась, «значит в моем примере 75% * 0,5 = 37.5%»

    70. Сергей Чикуенок
      1 июля 2009

      Не разобралась только с одним.. при соотношении 25/75 ширина левого текстового блока — 33% (нашла опытным путем).

      Если поделите 25 на 75, то получите эти самые 33% 🙂 Точно так же в приведенном примере: 25/50 = 50%. Это, пожалуй, самая сложная часть в понимании применения моего способа: научится правильно считать пропорции вложенных колонок.

      Следующий этап — научится правильно подбирать ширину контейнера, от которого будут вестись расчеты колнок. Попробуйте на своем примере: установите ширину контейнера в 50%, а колонкам — 50% и 300% соответственно. Эффект должен быть таким же, как и при использовании колонок 25%/75%. Только если макет растягивается на всю ширину браузера, будет появляться горизонтальный скролл из-за округлений значений.

    71. ling
      1 июля 2009

      Спасибо,все получилось (детское ощущение разгаданного фокуса 🙂 ).
      Завтра с утреца попробуем на вкус ВТБ24 🙂

    72. Vii
      1 июля 2009

      В примере Сергея 0,5 это не коэффициент, а 50% ширины внутреннего контейнера (оранжевый блок), что относительно длинны всей страницы равно нужные 25 %.

      А что означает 25/75 и как это соотношение привело к 33% ? 😉

    73. ling
      1 июля 2009

      25 и 75 — соотношение ширины столбцов, которое нужно получить в итоге.

      про природу 33% см. чуть выше

    74. Сергей Чикуенок
      1 июля 2009

      А что означает 25/75 и как это соотношение привело к 33% ?

      25 — это одна треть от 75, то есть 33%. Поэтому 33% от 75 — примерно то же самое (погрешность в 0,3333%), что и 25% от 100.

    75. 3 июля 2009

      Статья пришлась очень кстати и очень вовремя. Хоть и колонки надо было сверстать не float, но одинаковой высоты с бордюром и фоном, так что — спасибо =)

    76. 4 июля 2009

      Можно и так без графики http://trifler.ru/blog/i/layouts/border_fm/border_yes_lcr.htm
      Касаетася ссылки на сайт ВТБ24

    77. Сергей Чикуенок
      4 июля 2009

      На ВТБ24 растягиваются все колонки, а не только центральная.

    78. 4 июля 2009

      «На ВТБ24 растягиваются…»
      Это и у меня делается без проблем.
      Кнопка «Отправить» комментарий не работает В IE и FF, можно поправить?

    79. Сергей Чикуенок
      4 июля 2009

      Растягиваются по горизонтали.

    80. 4 июля 2009

      «Растягиваются по горизонтали.»
      Это и имею в виду, говоря — «Это и у меня делается без проблем.»

    81. Сергей Чикуенок
      4 июля 2009

      Это и имею в виду, говоря — “Это и у меня делается без проблем.”

      Наверно, стоит это показать в примере? Сейчас я вижу только две боковые колонки с фиксированной шириной и дырку в нижнем бордере у Safari и Fx3.

    82. 4 июля 2009

      Примерно так http://trifler.ru/blog/i/layouts/border_fm/border_yes_lcr_01.htm
      К сожалению, в IE6 проверка «Делаем колонку длиннее», макет ломает.
      Видимо все дело в процентах.
      На таком тесте многие страницы в IE6 ведут себя не предсказуемо.

    83. iSergey
      6 июля 2009

      Сергей, а как сделать, чтобы эти две колонки заполняли всю ширину?
      Дописал в col2 ширину 150%, вроде бы все работает. Подскажите, как правильнее сделать? Совсем запутался в этом способе.

      P.S. Спасибо большое за статью.

    84. Сергей Чикуенок
      6 июля 2009

      С заполнением 100% ширины экрана есть проблемы: из-за округлений процентных значений такой макет будет создавать горизонтальный скролл почти во всех браузерах (кроме Fx3). Как вариант, можно создать еще одну обертку и сделать ей правый margin в 2—3 пикселя.

      А в целом вы правильно поступили, задав 150% колонке.

    85. Василий
      7 июля 2009

      Сергей, я думаю вы знаете, в первом «правильном способе» блок с display:table-row можно опустить, упростив код

    86. Роман
      14 июля 2009

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

    87. 21 июля 2009

      Единственный минус проявляется, если в колонку кто-то нечаянно вставит картинку или таблицу шире самой колонки.

      img { max-width:100%; }
      по крайней мере в не <IE6 будет все нормально.

    88. Сергей Чикуенок
      21 июля 2009

      Единственный минус проявляется, если в колонку кто-то нечаянно вставит картинку или таблицу шире самой колонки.

      Можно весь контент колонки обрамить элементом с margin-right: -100%, можно для IE написать одноразовый expression, который добавит нужный отрицательный margin широким блокам. Вариантов много.

    89. Сергей
      22 июля 2009

      Сергей, а вы до этого метода сами дошли (просто любопытство :))?
      Почему-то забыл совсем про ваш метод, пока не наткнулся на эту ссылку:
      http://www.socialgeek.be/blog/read/flexible-equal-height-columns

      Теперь наверняка буду использовать метод, если подвернется удачный случай. Спасибо.

    90. Сергей Чикуенок
      22 июля 2009

      Сам дошел.

    91. Георгий
      27 июля 2009

      Удивительно. Великолепно. Hats off.

      Отдельное спасибо artyv за этот комментарий. Только мне пришлось добавить
      #fixed {
      vertical-align: top;
      }
      для ИЕ. Иначе он прибивал колонку к низу.

    92. Дмитрий
      2 августа 2009

      Отлично!
      Спасибо, то что нужно!

    93. PVasili
      3 августа 2009

      >>Сергей Чикуенок
      >>16 июня 2009

      >> А с бы попробовать с 3 колонками?
      >Три колонки по такой же, но чуть более сложной, схеме есть на сайте ВТБ24

      ——————
      На втб сделано криво (правая колонка не во всю высоту)…

    94. 9 августа 2009

      Как модифицировать этот способ получив левую колонку фиксированной ширины?

    95. Сергей Чикуенок
      9 августа 2009

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

    96. 9 августа 2009

      Я в толк не возьму как мне сделать 20%/80% колонки? Или близкие к этому соотношению пропорции.

    97. Сергей Чикуенок
      9 августа 2009
    98. 9 августа 2009

      Да так, но толстые бордюры лишние.
      Спасибо.

    99. 11 августа 2009

      Сергей, а возможно сделать тоже самое, но с padding: 0;?

    100. Сергей Чикуенок
      11 августа 2009

      Можно. А в чем проблемы? У вас не получается?

    101. 13 августа 2009

      Сергей, спасибо, на самом деле очень элегантное решение. Хочу спросить ради спортивного интереса: http://www.gololobovo-hram.ru/ можно ли сверстать на дивах? Обратите внимание на поведение при ресайзе окна. Сейчас работает на таблицах во всех браузерах одинаково. В свое время я сделал с десяток различных вариантов верстки, но так и не получил однообразия без применения таблиц.

    102. Сергей Чикуенок
      13 августа 2009

      2Magz: Да, это можно без проблем сверстать. Например, сделать блок с auto-шириной и боковыми бордюрами/марджинами по размеру боковых колонок. Ну и вложить в него две боковые колонки, одной указать float: left, второй — float:right, и с помощью отрицательных марджинов сместить их влево/вправо и вверх. В интернете полно таких решений.

    103. 14 августа 2009

      Нет, не получается.

    104. Kaylang
      14 августа 2009

      Доброго времени суток!
      Почему-то у меня фоновая картинка для левой колонки не отображается.

      .col-wrap1 {
      width: 224px;
      background:url(../images/menu_sx8.png) #ffffff left top repeat-y;
      }

      Не подскажете в чем может быть проблема?

    105. GreLI
      10 сентября 2009

      …я прочил, что такое реализовать невозможно 🙂

      Может быть «прочёл»? 🙂

    106. GreLI
      10 сентября 2009

      Сергей, я думаю вы знаете, в первом “правильном способе” блок с display:table-row можно опустить, упростив код

      …И наткнётесь на баг в Файрфоксе со случайно съезжающим время от времени содержимым.

    107. 10 сентября 2009

      Жаль, но для сложной графики и вёрстки, метод не подходит.
      После многих экспериментов и танцев с бубнами, пришлось пользоваться джсом %)

      Метод для 3ё колонок, похожий на ваш:
      http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

    108. Alex
      19 сентября 2009

      Огромное спасибо автору. Хоть стал понятен смысл стилей, а то у многих просто рецепт дан и ничего не понятно.

      deerua, потрясающая ссылка. Спасибо. В том блоге содержится море примеров по созданию разнообразнейших резиновых макетов:
      -2-5-колоночная резина и указания, как сделать n>5 колонок;
      -3-х колоночная с фиксированными по ширине крайними блоками и занимающим все остальное место центральным(жаль, раньше не видел);
      -3-х колоночная с фиксированным по ширине центральным блоком;

      Без использования margin-ов и padding-ов, которые глючат в ИЕ.

    109. 6 октября 2009

      Сергей, здравствуйте!
      В очередной раз пытаюсь решить свою проблему с помощью вашей головы 🙂

      Понравился ваш метод, пробую сделать двухколоночную вёрстку, при этом ширина левой колонки должна быть 80% от ширины страницы, ширина правой соответственно 20%, CSS выглядит так:

      .col-wrap1 {
      width:80%;
      background:blue;
      }

      .col-wrap2 {
      width:25%;
      margin-right:-100%;
      position:relative;
      left: 100%;
      background:red;
      }

      .col1 {
      float:left;
      width:400%;
      margin-right:-100%;
      position:relative;
      left:-400%;
      }

      .clear {
      clear:both;
      font-size:0;
      overflow:hidden;
      }

      При этом синий и красный блоки выглядят так как надо, но содержимое .col2 сползает вниз на высоту содержимого .col1

      В чём у меня проблема? (помимо ДНК, конечно)

    110. Сергей Чикуенок
      6 октября 2009

      Попробуйте для .col1 указать margin-right:-400%

    111. 6 октября 2009

      Помогло, спасибо!

      Кстати, тут кто-то задал вопрос про трёхколоночную вёрстку, по-моему самый очевидный способ — вложить аналогичную конструкцию в одну из колонок(col1 или col2). Я не силён в вёрстке и не знаю, чем плох такой подход, но он сработал.

    112. Alexандр
      7 октября 2009

      1. Действительно, здорово. Очень и очень хорошее решение.
      Но если, например, на странице «специального примера» обоим контейнерам назначить даже 1пкс бордеры, то визуально заметна «разновысотность» блоков.

      2. «Правильное решение» — это эмуляция таблицы CSS1 свойствами. Структура и глубина вложенности тегов теже, что и в таблице. По сути это одно и тоже. Тогда в чем «правильное решение» отличается от таблицы?
      rem: Увы, «самый популярный браузер» не поддерживает эти свойства CSS1.

    113. Сергей Чикуенок
      7 октября 2009

      Но если, например, на странице “специального примера” обоим контейнерам назначить даже 1пкс бордеры, то визуально заметна “разновысотность” блоков.

      Для этого есть отрицательный марджин

      “Правильное решение” — это эмуляция таблицы CSS1 свойствами. Структура и глубина вложенности тегов теже, что и в таблице. По сути это одно и тоже. Тогда в чем “правильное решение” отличается от таблицы?

      В том, что вы используете обычные <div>-блоки, которые можно как угодно стилизовать под разные устройства (печать, PDA). С <td> такого не получится.

    114. Alexандр
      7 октября 2009

      P.S.
      Извиняюсь!!!
      О бордерах я писал касательно примера на странице, а не «специального примера».

    115. Андрей
      23 ноября 2009

      А можно ли как-то этоти колонки сделать с ограничением по максимальной ширине?
      Чтобы на больших разрешениях мониторов смотрелось нормально?

    116. 23 ноября 2009

      Это можно сделать через максимальную ширину контейнера

    117. Melo
      1 декабря 2009

      А какой способ посоветуешь для колонок с фиксированной шириной?

    118. 11 декабря 2009

      *{margin:0; padding:0; border:0;}
      .all{width:700px; margin:0 auto;}
      .col-wrap1 {
      background:blue;
      width: 500px;
      }
      .col-wrap2 {
      width:200px;
      margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
      position:relative;
      left: 500px;
      background:red;
      }

      .col1 {
      float:left;
      width:500px;
      margin-right:-500px;
      position:relative;
      left:-500px;
      }
      .col2{
      width:200px;
      margin-left:500px;
      position:relative;
      left:-500px;
      margin-right:-500px;}

      .clear {
      clear:both;
      font-size:0;
      overflow:hidden; /* тройной презерватив для IE */
      }

      Тут кто-то спрашивал, о том, как сделать такое же с фиксированной шириной колонок. Меня этот вопрос тоже заинтерисовал, т.к. начал рисовать и верстать тему под вордпресс. И там боковина должна быть на всю высоту контента. Вот собственно и ответ.
      Работает и в ИЕ6 и опере 9.21

    119. Rinaatt
      18 декабря 2009

      Тут поэкспериментировал с трехколоночным макетом, вот что получилось:

      .col-wrap1 {
      width:20%;
      background-color:palegreen;
      }

      .col-wrap2 {
      position:relative;
      width:300%;
      left:-300%;
      margin-right:-300%;
      background-color:moccasin;
      }
      .col-wrap3 {
      position:relative;
      width:100%;
      background-color:aquamarine;
      left:400%;
      }
      .col1 {
      position:relative;
      float:left;
      width:33.3%;
      margin-right:-100%;
      left:-33.3%;
      }
      .col2{
      float:left;
      margin-right:-300%;
      width:100%;
      }
      .col3{
      position:relative;
      width:33.3%;
      left:100%;
      }
      .clear {
      clear:both;
      font-size:0;
      overflow:hidden;
      }

      хочу знать, может проще и красивее можно сделать?

    120. Rinaatt
      18 декабря 2009

      млин теги вырезал: вот html:
      <div class="col-wrap1">
      <div class="col-wrap3">
      <div class="col-wrap2">
      <div class="col1">
      <!— контент первой колонки ширина 20% —>
      </div>
      <div class="col2">
      <!— контент второй колонки ширина 60% —>
      </div>
      <div class="col3">
      <!— контент третей колонки ширина 20% —>
      </div>
      <div class="clear"></div>
      </div>
      </div>
      </div>

    121. MaratCrash
      21 декабря 2009

      Сергей, здравствуйте!
      Скажите, а когда у Вас появится статья о технологии верстки макета? Очень жду с нетерпением ее =).

      С Уважением, Марат.

    122. Сергей Чикуенок
      21 декабря 2009

      Марат, спасибо что напомнили. Скоро напишу.

    123. 13 января 2010

      Блестящее решение, спасибо!
      Думаю, что это как раз то, что мне сейчас надо..
      Большое спасибо!
      Желаю успехов и со старым новым годом)

    124. 13 января 2010

      А! вот что важно упомянуть: верска безусловно хороша. Но, важно упомянуть, что, например, для IE из windows mobile это будет скорее всего жопа, потому что CSS position оно не понимает…

    125. sikwel
      3 февраля 2010

      Очень занимательная статья, Сергей, только вот никак не получается все это дело инвертировать, чтобы меньшая по размеру колонка была справа, подскажите пожалуйста, что-то я совсем запутался.

    126. Сергей Чикуенок
      3 февраля 2010

      Можно как минимум двигать эти колонки влево/вправо с помощью свойства left

    127. sikwel
      4 февраля 2010

      Хотелось бы, чтобы Вы немного прокомментировали применение этого способа в комплексе, например с прилипающим к низу футером и безразмерным по высоте хедером.

      Можно ли использовать этот способ для подобных макетов? и если да, в двух словах, как добиться прилипания футера, если есть еще и хедер безразмерный сверху, ведь если выставить стопроцентную высоту, придется и хедер как-то позиционировать, при этом он свою «безразмерность» потеряет.

      Я верстаю совсем недавно, так что, можете меня послать, туда где этот вопрос уже кто-то решал, буду очень благодарен (;

    128. sikwel
      4 февраля 2010

      Поэкспериментировав со свойством left пришел к такому цссу, Сергей, правильно ли я переставил колонки местами или есть способ попроще?

      И еще, если я все сделал верно, получится так же переставить колонки в процентном соотношении 75% на 25%, чтобы на всю ширину окна (или родительского дива выровненного по-центру) были.

      и еще, так я и не разобрался с этим хитрым свойством для ие6 margin-right:-200%; значение подобрал методом научного тыка (=

      CSS:
      ========================
      .col-wrap1 {
      width:25%;
      background:blue;
      position:relative;
      left:50%;

      }

      .col-wrap2 {
      width:200%;
      margin-right:-200%; /* чтобы IE6 не раздвигал контейнер */
      position:relative;
      left:-200%;
      background:red;
      height:300px;

      }

      .col1 {
      width:50%;
      left:50%;
      position:relative;
      background:yellow;
      float:right;

      }

      .clear {
      clear:both;
      font-size:0;
      overflow:hidden; /* тройной презерватив для IE */

      }
      ========================

    129. sikwel
      4 февраля 2010

      Соотношение 75% на 25% получилось, все работает вроде нормально, если не считать недостающего небольшого пространства между синим и желтым блоками из за погрешности наверное в 0,333333.

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

      Кстати, на ВТБ24 что-то подобное наблюдается, только при минимизации окна по кнопке, а когда минимизированное таскаешь, скролла нет.

    130. Сергей Чикуенок
      5 февраля 2010

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

    131. Николай
      4 мая 2010

      Сергей, здравствуйте!

      Я попытался используя ваши наработки сделать 3-хколоночный макет такого вида: |25%|45%|30%|. И сломал себе мозг. Перебрал уже приличное количество вариантов реализации, но ни один так и не заработал… Никак не могу подобрать правильный базовый размер колонки для сетки.

    132. Сергей Чикуенок
      5 мая 2010

      Размеры некрасивые, лучше добить левую колонку до 30%, тогда будет легче. Как правило, всё зависит от макета: кое-где можно схитрить и выглядеть всё будет как по макету, но размеры колонок будут другими.

      Но если вам не важно поведелие макета по время растягивания либо просто попрактиковаться, то вот (в IE не проверял).

    133. Николай
      5 мая 2010

      Сергей, спасибо огромное за ответ и пример! Про трюк с padding-right я сам и не догадался…

    134. 24 мая 2010

      Сергей, респект!

      Верстаю второй год но не думал что можно так исхитриться 🙂

      Однако есть одно но. Правильно-ли я понимаю что данный метод подходит только для макетов со всеми резиновыми колонками?

      У меня 3-х колоночный макет, резиновая только центральная колонка, правая и левая фиксированные, одинаковой ширины. Ломал мозг два дня, так и не понял можно-ли это применить в моем случае.

    135. 24 мая 2010

      Поясню зачем понадобились колонки одинаковой высоты.
      Вот макет:

      Задача в том чтобы сделать перемещаемые блоки. Проблемы начинаются, когда пользователь хочет перекинуть блок в левую колонку, маленькую по высоте. Блок не кидается на колонку потому что там куда блок хотят кинуть, колонки нет, она заканчивается выше.

      а нужно сделать так:

      Конечно высоту можно указать JS, или колонки реализовать таблицей, но уж сильно интересно как-бы вы решили такую задачу?

    136. 24 мая 2010

      зашибись, коммент с прямыми ссылками на картинки не принимает антиспам, а не отображается 🙁

    137. 24 мая 2010

      тэг IMG не отображается. Блин опять тэг обрубил.

    138. Сергей
      2 июня 2010

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

      .col-wrap1 {
      width:25%;
      background:blue;
      }

      .col-wrap2 {
      width:200%;
      margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
      position:relative;
      left: 100%;
      background:red;
      }

      .col1 {
      float:left;
      width:50%;
      margin-right:-100%;
      position:relative;
      left:-50%;
      }

      .clear {
      clear:both;
      font-size:0;
      overflow:hidden; /* тройной презерватив для IE */
      }

      left column1

      left column2

      center column1

      center column2

      Не будет работать так как хочется, надпись «center column2» слетает в самый низ. приходиться использовать довольно часто, например для скидывания выравнивания float. Есть ли решение этой проблемы?

    139. woob
      9 июня 2010

      Спасибо за статью!

      Для себя нашел еще способ, в том случае когда колонки, например две, разделяются одной
      границей.

      Выставляем границы у двух примыкающих краев, указываем z-index, и смещаем 1 блок в нахлест. Например:

      div1 { width: 300px;
      float:left;
      background:url(border.png) right top repeat-y;
      z-index:2;position:relative:left:2px
      }
      div1 { width: 700px;
      float:right;
      background:url(border.png) left top repeat-y;
      z-index:1;
      }

      ширина блоков и смещение уже по ситуации.

    140. Сергей Чикуенок
      10 июня 2010

      woob, в такой ситуации картинка необязательна: просто рисуйте бордюр справа и слева для блоков и убирайте их влияние с помощью отрицательных margin-right и margin-left.

    141. .....
      6 октября 2010

      херь………………….

    142. 13 октября 2010

      Сергей, привет!

      Подскажите, существует ли способ сверстать (без JS) 3-колоночный макет, чтобы боковые колонки были одинаковой высоты, а средняя — любой. Провозился уже 2 дня, не вижу решения проблемы.

      Желательно, чтобы средняя колонка в коде была первой.
      Спасибо!

    143. noob
      5 марта 2011

      Здрасьте.

      Я вот мучаюсь очень долго, чтобы в двухколоночном макете, сделанному по второму принципу, контейнер, в который вложены колонки с текстом, растягивался по высоте на 100% относительного своего родительского, самого внешнего контейнера, когда текста в колонках с текстом не очень много. Везде получилось — и в Opera, и даже в IE6, но FF упорно не хочет этого делать — контейнер-«обертка», если текста в колонках не очень много, разворачивается по минимуму, насколько его растягивает самая большая колонка, а на 100% высоты родительского контйнера (у которого тоже задана высота 100%) он разворачиваться не хочет. Это, видимо, как-то связано с height:auto.

      В общем, я накидал тут пример кода, чтобы проблема была нагляднее, вот файлики:

      http://narod.ru/disk/6880350001/test.rar.html

      В общем, в FF красный контейнер не растягивается до конца страницы. А надо, чтобы растягивался. Возможно ли это здесь сделать, и если да, то как? В Opera и IE6 все работает как нужно. На фон колонок с текстом не обращайте внимания, это сделано чтобы были видны их положения.

    144. Павел
      18 марта 2011

      noob, просто у тебя в примере нужно убрать строчку
      height:auto !important; в #container1

    145. noob
      18 марта 2011

      Павел, спасибо за ответ, но я это уже пробовал. Дело в том, что если убрать эту строчку, то начинаются проблемы с Оперой и FF — если в первую колонку добавить контента, чтобы он уже не умещался в окно браузера по высоте и чтобы появился скролл, красный контейнер вместе с этим контентом вниз не тянется. А вот в IE работает.

    146. Павел
      21 марта 2011

      попробуй дописать ещё min-height:100%

    147. Yubari
      12 апреля 2011

      Очень заинтересовала часть css, которая отвечает за clear. Почему именно такая конструкция, для чего понадобилось указывать font-size и overflow. Заранее спасибо=)

      .clear {
      clear:both;
      font-size:0;
      overflow:hidden; /* тройной презерватив для IE */
      }

      PS Почему на http://www.imobilco.ru/ для .clear используется height: 1px;

    148. Дмитрий
      19 мая 2011

      Спасибо большое, способ гениальный! Сделал 3 колонки по образу и подобию, доволен как слон

    149. tataRen
      25 мая 2011

      Сергей, здравствуйте.

      Никак не получается расположить обе колонки строго по центру. Не подскажите решение?

    150. 26 мая 2011

      Сергей, вам огромный респект за идею и процентное исполнение!
      Dr. Pretender, вам огромный респект за фиксированное решение!

    151. 3 июня 2011

      Сергей, не могли бы вы привести формулы для расчетов отступов и ширин колонок и их враперов. Спасибо.
      Возможно ли, например, сделать колонки: 70% и 30%? И возможно ли любое процентное/пиксельное разделение?

    152. Kate
      8 июня 2011

      Присоединяюсь к просьбе Luciuz.
      Пожалуйста, Сергей, поясните, как процентный расчет ведется — ширины колонок, врапперов, их марджинов? Уже пару недель бьюсь над вашим способом, но что-то упускаю. Не могу корректно повторить с другими величинами. Перевела с процентов на пиксели даже, чтобы принцип понять — получилось, работает, но все равно не ясно, как рассчитывать.
      И можно ли, скажем, одну колонку делать в пикселях, а другую — тянущейся?

    153. Сергей Чикуенок
      9 июня 2011

      Кратко описать алгоритм довольно сложно: нужно руководствоваться размерами итоговых колонок. В общем случае нужно найти такой размер базовой колонки, чтобы все внутренние колонки делились на него без остатка. По крайней мере чтобы не было дробных процентов, потому что их до сих пор не понимает Opera.

    154. Luciuz
      9 июня 2011

      чего-то я запутался, разве внутренние колонки не всегда меньше внешних?

    155. Сергей Чикуенок
      9 июня 2011

      Не всегда: всё зависит от макета. Они могут быть и больше, и меньше.

    156. Алексей
      12 июня 2011

      друзья, а кто-нить пробовал добавлять к «оберткам» бордер? у меня в этом случае получается что высота дочернего блока становится меньше чем высота родительского. хотя до того как добавил бордер, высоты у них были одинаковые.

    157. poorking
      12 июня 2011

      Алексей
      Все правильно, это потому что эти обертки вложены друг в друга, можно попробовать вложенным оберткам дать отрицательный margin сверху и снизу на толщину бордера

    158. Роман
      1 июля 2011

      Сергей, и все таки, существует ли решение для макета с фиксированнойрезиновой шириной колонок? В идеале мне нужно 4-5 колонок с шириной в пикселях и одну «тянущуюся» по горизонтали. Но проблема в том, что решить такую задачу я не могу даже с двумя блоками. Очень надеюсь на Вашу помощь или совет.

    159. Сергей Чикуенок
      1 июля 2011

      Роман, про решение с колонками фиксированной ширины я пока не думал

    160. Роман
      1 июля 2011

      Сергей, жаль.. В любом случае, спасибо за статью — будет над чем голову поломать в ближайшее время.

    161. Alex
      17 августа 2011

      Написал скриптик для облегчения расчетов процентов, вроде работает правильно.
      Генерит css (и полный html для проверки в браузере).
      Смотреть тут: http://www.chipmaker.ru/slider.html

      Проверял в ФФ, осле, Опере, вроде без глюков.

      / ни разу не программист, просьба код не ругать 🙂 /

    162. Андрей
      18 октября 2011

      А как можно сделать тоже самое, если ширина обоих колонок задана не в процентах, а в пикселях?

    163. Alex
      18 октября 2011

      что-то делал такое, вроде работало: http://www.chipmaker.ru/slider4.html

    164. Yrgl
      4 ноября 2011

      Сергей, здравствуйте!

      Вроде на сайте ВТБ отказались от упомянутой Вами выше 3-х колоночной системы. Не могли бы Вы сделать страничку-пример такого 3-х колоночного макета и выложить в общий доступ?

      Спасибо.

    165. Олег
      2 января 2012

      Alex, спасибо за скрипт, очень полезно!
      Сергей, а как реализовать сетку | 100px | auto | 30% |, чтобы центральная и правая колонки были одной высоты, а левая как получится?

    166. Наталья
      19 января 2012

      Спасибо большое!
      Интересное решение наболевшей проблемы!

    167. 5 марта 2012

      Сергей — спасибо)
      Dr. Pretender — спасибо) решение как-раз для меня, для вёрстки с колонками фиксированной ширины

    168. Вадим
      31 марта 2012

      а почему не сделать через ul/li?
      задать каждому элементу индивидуальную ширину и высоту 100%

    169. 28 мая 2012

      > а почему не сделать через ul/li?
      > задать каждому элементу индивидуальную ширину и высоту 100%

      И чем же это поможет?

    170. 17 июня 2012

      Три float-колонки одинаковой высоты.
      На основе данного примера сделал трехколоночный шаблон плюс методика расчета

      http://ituspeh.pl.ua/html-css.html

    171. 17 июня 2012

      А ну и собственно свой сайт сделал на этом шаблоне
      http://ituspeh.pl.ua/
      Сергею респект и уважуха!

    172. Ренат
      28 сентября 2012

      Ну никак не могу понять логику, почему первому контейнеру задаём 25% а второму АЖ 200%?
      *****Соответственно, если первому — внешнему — контейнеру мы зададим ширину в 25%, а второму — внутреннему — 200% (две ширины внешнего контейнера, что будет соответствовать 50% относительной всей страницы) и сместим его на ширину контейнера вправо, мы получим подобие того, чего хотим добиться:*****