Три колонки — центральный фиксированный, остальные тянутся

three-block
На одном форуме нашел вопрос:
Делается верстка трех блоков в строку. Центральный имеет фиксированную ширину, остальные тянутся занимая оставшееся пространство.

Ну сразу мысли какие? Никакие.. Есть вариант использовать таблицы, jQuery или блоки с абсолютным позиционированием.

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

1. Таблицы

Html:

  Center  

Css:


#table{width:100%;margin-bottom:10px;border-collapse:collapse}
.t-one, .t-three{background:#ddd;}
.t-two{width:300px;background:#69cee8;}

Все работает? Нет, нет.. Если содержимое боковых блоков будет разным, то центральная колонка не будет расположена по центру!

2. Блоки с абсолютным позиционированием

Html:

Two
One

Three

Как видите, центральный блок в коде находится впереди.

Css:

#centerCol{width:300px;background:#69cee8;}
#leftCol, #rightCol{background:#ddd;}
#leftCol, #rightCol, #centerCol{padding:2px 3px;}
.name{padding:5px 15px;margin-top:20px;}
#centerCol{position:absolute;left:50%;margin-left:-153px;}
#leftSect, #rightSect{width:50%;}
#leftSect{float:left;}
#rightSect{float:right;}
#leftCol{margin-right:153px;}
#rightCol{margin-left:153px;}

Если вы плохо понимаете css, то лучше вам этот пример не использовать.

3. Блоки и jQuery скрипт

Сама jQuery библиотека, в сжатом виде, весит не менее 55 киБ. Плюс еще вес самого скрипта и страницы. Получается многова-то. Но если у вас библиотека уже подключена, то этот пример можно использовать.

Html:

One
Two
Three

CSS:

#one, #two, #three{float:left;}
#two{width:300px;background:#69cee8;}
#one, #three{background:#ddd;}
#one, #two, #three{padding:2px 3px;}

jQuery скрипт:

Теперь все работает. Если вы уже используете jQuery скрипты на своем сайте, то это решение вам точно подойдет. Однако есть одно но, работает скрипт при ресайзе, с маленькой задержкой.

Вы увидели три, абсолютно разных варианта решения.
Первый — минимум кода. Но использование таблицы, это мне не совсем нравится. Второй — используем абсолютное позиционирование. Хотя пример хороший, вы можете смело его использовать. Третий — использование jQuery скрипта. Большая прибавка к весу вашей страницы.

Для наглядности, проверьте сразу все примеры:

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

Комментарии — 6 комментариев

  1. #3842 40a в 18:59, 17 августа 2009:

    Ответить | Цитировать

    Вы варианты тестируете?
    Вставьте абзац с «рыбой» в первую колонку и увидете много интересного.
    Самый приличный вариант — «Блоки с абсолютным позиционированием», но и он разваливается в IE6, а в нормальных браузерах появляется зазор между второй и третьей колонками.

  2. #4424 WebMast в 9:22, 27 августа 2009:

    Ответить | Цитировать

    40a, тестировал в FF (3.5), Opera (10.00 Beta), Konquerror (4.2.4), Chromium (3.0.194.0). Все хорошо : ).

  3. #4448 40a в 18:47, 27 августа 2009:

    Ответить | Цитировать

    Рано ослика списываете.
    Что за Chromium (3.0.194.0)? Или уже Google Chrome переименовали 😉
    Есть ли Konquerror под винду?

  4. #4486 WebMast в 11:22, 28 августа 2009:

    Ответить | Цитировать

    Я принципиально не верстаю под ie6, иногда и под ie7.

    Chromium — по моему это линукс версия так называется.

    Не знаю насчет винды, у меня ее нету поэтому даже и не искал..

  5. #40303 оля в 17:54, 19 ноября 2014:

    Ответить | Цитировать

    Большое спасибо! Вы меня спасли, я уже и так, и эдак к этим колонкам, а они — ни в какую!
    Респектище!!!!!!

  6. #40619 vanoID в 9:19, 21 ноября 2014:

    Ответить | Цитировать

    @ оля:
    на здоровье)

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting