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

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

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

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

1. Таблицы

Html:

Css:


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


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

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

Html:

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

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:

CSS:

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

jQuery скрипт:

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

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

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

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