Здравствуйте уважаемый пользователь портала cssclub.ru. В данной статье речь пойдёт о том, как сделать 3 колонки с помощью DIVов, а именно как сделать так, что бы две колонки были фиксированной ширины, а между ними при этом находилась колонка которая тянется, в зависимости от размера (ширины) браузера.

Итак, представим себе что у нас есть колонка, которая всегда будет прижата к левой области браузера с фиксированной шириной 240px, так же есть колонка которая будет всегда прижата к правой области браузера и тоже будет иметь фиксированную ширину 240px, между ними соответственно будет располагаться центральная колонка, которая будет менять свою ширину в зависимости от размера (ширины) браузера. В центральной колонке зачастую располагается контент сайта, а в колонках по бокам разного рода информация. Лично я не однократно видел такую структуру кода в интернет магазинах, она для них очень удобна, так как к примеру слева можно расположить каталог товаров, по средине их описание, цены и т.д., ну а в правой колонке например рекламу, либо популярные товары, или же пользовательское меню и т.д. Для наглядного примера, ниже я поместил картинку, в которой колонки под номером 1 и 2 фиксированы, а колонка под номер 3 – способна менять свою ширину:



Итак, вот наш HTML код:

<div id="content">
  
    <div id="column-left">
      1
    </div>
    
    <div id="column-right">
      2
    </div>
    
    <div id="column-center">
      3
    </div>
	
</div>

и CSS:

#content {
	min-width: 980px;
	width: expression( (document.documentElement.clientWidth || document.body.clientWidth) < 980 ? '980px' : '100%');
}

#column-left {
	float: left;
	width: 240px;
}

#column-right {
	float: right;
	width: 240px;
}

#column-center {
	margin: 0 240px 0 240px;
}

Довольно таки простой код в принципе, но хотел бы обратить Ваше внимание на последовательность его написания, как Вы уже наверное заметили мы пишем сначала код для левой колонки, потом для правой, и затем уже идет средняя колонка. Лично для меня всегда казалось что надо писать код для левой колонки, потом для средней и только потом для правой, но не тут то было, если мы хотим получить нужный нам результат, то структура кода должна быть именно такой, какой она представлена в примере. Из кода Вам уже наверное стало понятно, что мы флотим два блока (левый и правый) по разным сторонам, средний блок естественно исходя из свойств “float: left” и “float: right” поднимается вверх, и для того что бы наш средний блок не залазил на наши боковые колонки, мы задаём ему свойство “margin”, то есть делаем внешний отступ, который должен быть равен как минимум ширине каждого из блоков. Исходя из тех соображений что у нас каждый блок равен 240px, я и сделал отступ по 240px с каждой из сторон. Так же для основной DIVки под названием “content” нам желательно задать минимальную ширину (min-width), обычно это в районе 980px. Это нужно для того, что бы при небольшой ширине браузера наши блоки не рассыпались, попробуйте не писать CSS свойство “min-width” в коде, и изменить размер браузера к минимуму, Вы увидите что произойдет с нашими блоками и Вам вряд ли это понравится.

Этого кода в прицепе было бы достаточно, если бы не IE6.0 Данный браузер снова отличился, и отличился как всегда не в лучшую сторону. К сожалению IE6.0 не понимает такого CSS-свойства как “min-width”, и поэтому для блока “#content” нам ещё придется написать такой вот код:

width: expression( (document.documentElement.clientWidth || document.body.clientWidth) < 980 ? '980px' : '100%');

Это своего рода фильтр для данного браузера, и в этом коде нам всегда нужно менять только два значения, в данном примере это число “980”, это значение говорит браузеру ИЕ6.0 какова должна быть минимальная ширина. Должен Вам сообщить что данный фильтр имеет один минус, для кого то большой, для кого то не очень, лично для меня это просто обидно, дело в том что при использовании данного фильтра наш CSS код не проходит валидацию. Я не знаю к сожалению другого способа, который бы позволил объяснить браузеру ИЕ6.0 какова должна быть минимальная ширина, может быть Вы сталкивались с данной проблемой, и могли бы что-либо сообщить по этому поводу. Если да, то поделитесь пожалуйста своими знаниями.

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