Главная » Создание сайтов » Программирование » Три колонки — центральный фиксированный, остальные тянутся

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

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

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

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

1. Таблицы

Html:

<table id="table">
<tr>
<td class="t-one"> </td>
<td class="t-two"> Center </td>
<td class="t-three"> </td>
</tr>
</table>

Css:

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

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

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

Html:

<div id="centerCol">Two</div>
<div id="leftSect">
<div id="leftCol">One</div>
</div>
<div id="rightSect">
<div id="rightCol">Three</div>
</div>

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

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:

<div id="one">
One
</div>
<div id="two">
Two
</div>
<div id="three">
Three
</div>

CSS:

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

jQuery скрипт:

<script type="text/javascript" charset="utf-8">
<!--//<![CDATA[
$(document).ready(function(){
function wdi() { // Функция, которая высчитывает ширину блокам.
var w = $(window).width(); // Заменяем ширину window переменной.
var b = $("#two").width(); // Заменяем ширину блока #two переменной.
$("#one, #three").css("width", (w-b)/2); // Заменяем ширину первого и третьего блоков формулой: ширина окна - ширина блока и делим на два.
}
wdi(); // Функция вызывается при загрузке страницы.
$(window).resize(function () { // При ручном ресайзе окна, заного выполняем функцию wdi.
wdi();
});
});
//]]>-->
</script>

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

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

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

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

Комментарии — 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