) можно вообще не использовать. Я привел его для большей наглядности, но в реальной верстке его можно опустить.

2. Использование margin, padding + overflow:hidden

#middle{width:100%; overflow:hidden; } #left-column{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:20%; } #content{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:59.8%; } #right-column{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:20%; }

Способ уже немного посложнее, но тоже ничего сверхумного. Радует то, что способ работает во всех браузерах. Суть метода:

• Делаем див в котором будем размещать все наши колонки
• Создаем внутри этого дива еще три дива которые собственно и будут теми самыми колонками.
• Выравниваем колонки по горизонтали с помощью float:left;
• Присваиваем всем колонкам margin-bottom:-32000px; padding-bottom:32000px;
• Присваиваем overflow:hidden для родительского дива.

Если непонтяно что мы тут сделали, то объясню подробнее.

Что делает свойство margin-bottom:-32000px?
Оно растягивает колонку вниз на 32000px.

Что делает свойство padding-bottom:32000px?
Оно делает отступ от нижнего края блока до контента в 32000px.

Что делает свойство overflow:hidden у родительского дива?
Оно скрывает ту часть блока в которой нет контента.

Если просуммировать то что я написал выше, то получается, что мы растянули пустое пространство снизу каждой из колонок, и обрезаем его по высоте той колонки в которой больше всего контента. По факту пустое пространство тянется еще очень долго вниз, но пользователь его не видит за счет overflow:hidden.

3. Вложенные колонки

#middle{width:100%;} #left-wrap{ width:20%; position:relative; } #content-wrap{ width:300%; margin-right:-300%; position:relative; left:100%; } #right-wrap{ width:33.1%; margin-right:-33.3%; position:relative; left:100%; } #left{ float:left; width:100%; margin-right:-100%; position:relative; left:-400%; } #content{ float:left; width:300%; margin-right:-300%; position:relative; left:-300%; } #right{ float:left; width:100%; }

Для большей ясности советую изучить пример в котором все это уже работает:

Этот способ самый сложный для понимания из всех перечисленных, но это не делает его сложным вообще. За несколько часов плотного изучения статьи и самостоятельных экспериментов он будет полностью понятен. Он самый универсальный, поэтому очень советую его изучить. Итак, как это понятно из названия мы будем вкладывать колонки друг в друга. Здесь уже не хватит простого перечисления шагов в столбик, поэтому каждый из шагов я распишу немного подробнее чем в предыдущих примерах.

Первый шаг. Плацдарм

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

Второй шаг. Создаем оформительские дивы

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

Третий шаг. Создаем дивы с контентом

В последнем из трех вложенных дивов создадим еще три дива, но уже параллельно. Последние три дива не надо вкладывать друг в друга. Эти параллельные дивы будут отвечать за контент каждой из колонок. В них будет расположен текст и любой другой html.

Четвертый шаг. Определяемся с шириной оформительских колонок

Ширина всей страницы (ширина плацдарма) - 100%. Ширина левой колонки 20%. Выставим для левого оформительского дива ширину 20%. Пока все просто.

Ширина центральной колонки 60% от ширины страницы. Так как центральная колонка вложена в левую, то ее ширина будет рассчитываться относительно левой колонки(родителя). Центральная колонка в три раза шире чем левая, то есть нужно выставить ширину для центральной колонки в 300%.

Ширина правой колонки 20% от ширины страницы. Так как правая колонка вложена в центральную, то ее ширина так же будет рассчитываться относительно родителя и будет в 3 раза меньше чем ширина центральной, то есть нам нужно выставить ширину правой оформительской колонки в 33,3%.

Пятый шаг. Определяемся с шириной контентных колонок

Все три контентных дива вложены в правую оформительскую колонку. Они вложены параллельно. Чтобы было понятнее можно провести аналогию, три матрешки вложены друг в друга и в последней матрешке лежат три кубика. Матрешки это вложенные друг в друга оформительские колонки, а кубики это дивы с контентом.

Ширина правой колонки 20% от ширины страницы. Мы будем рассчитывать все размера контентных дивов относительно этой величины.

Ширина левой контентной колонки - 100% от родителя (20% от страницы)

Ширина центральнойконтентной колонки - 300% от родителя (60% от страницы)

Ширина правой контентной колонки - 100% от родителя (20% от страницы)

Шестой шаг. Двигаем оформительские колонки

Нам нужно сделать так, чтобы каждая из оформительских колонок начиналась там, где заканчивается предыдущая колонка. Сделать это довольно просто. Мы просто присвоим центральной и правой колонкам position:relative и сдвинем их вправо на 100% - left:100%.

Почему именно 100%? Потому что нам надо сдвинуть колонку на всю ширину родительского блока.

Седьмой шаг. Двигаем контентные колонки

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

Для начала выровняем колонки по вертикали с помощью float:left;

Теперь присвоим левому и центральному контентному диву position:relative;, дальше начнем двигать.

Левый контентный див начинается в левом верхнем углу правой колонки. Чтобы он стал отображаться поверх левой оформительской колонки нам надо сдвинуть его на 80% влево от ширины страницы. Так как ширина правой колонки 20% от страницы, то мы будем двигать на четыре ширины правой колонки влево или на 300% от ширины правой колонки - left:-400%;

После того как мы сдвинули левый див с контентом его место в правой колонке занял центральный див. Его мы должны сдвинуть только на 60% относительно ширины страницы или на три ширины правой колонки. Сдвинем центральную колонку на 300% влево.

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

Еще немного пояснений

Свойства margin-right с отрицательным значением нужны для того, чтобы исключить влияние сдвинутых колонок на поток. То есть все последующие дивы будут выравниваться так, как будто ширина этих колонок с отрицательными margin равна нулю.

Див с классом clear после всех контетных колонок нужен чтобы разорвать поток. После него высота колонок не будет схлапываться.

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

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

Это умение применяется практически везде, даже верстая стандартный макет из 2-х колонок, вы столкнётесь с этой проблемой, если вы будете верстать блоками. Так же этот урок направлен на развитие понимания самих принципов блочной вёрстки.

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

Но с блоками всё иначе. Посмотрите на 2 колонки свёрстанных блоками.

Почему же так происходит?

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

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

Их много, но сегодня я приведу самую простую и понятную новичку хитрость. Мы просто поместим оба блока в ещё один блок, который их объединит, и этому блоку зададим такой фон, который нам нужен. Так как общий блок будет продолжаться до конца самого большого из блоков, его фон будет распространяться вниз.

Посмотрим, как это выглядит на схеме.

Теперь давайте переходить непосредственно к коду.

Теперь разберём что к чему.

Далее создадим фоновое изображение. Ширина главного блока у нас будет равна 700 px. Следовательно и ширина фонового изображения будет равна 700px. Высоту можно задавать любую в зависимости от того, какой у вас фон.

Я создал такое изображение и назвал его textured. gif

Теперь смотрим, что получилось в CSS

#main {width:700px; margin:0 auto; background-image:url(textured.gif); background-repeat:repeat-y; }
#one {width:400px; float:left;}
#two {width:300px;}

Теперь если мы посмотрим на результат, то увидим следующие:

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

Я создал вот такое фоновое изображение и назвал его textured1. gif

Естественно соответствующим образом изменил одно из свойств в CSS.

#main {width:700px; margin:0 auto; background-image:url(textured1.gif); background-repeat:repeat-y; }

Вот что получилось:

P.S. от Максима: данный эффект не работает у меня в Firefox.

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

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

1. Создание столбцов с одинаковой высотой

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

Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».

.container{ display: flex; flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/ align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/ }
Пример

2. Изменение порядка

Некоторое время назад, если бы мне пришлось динамически изменять порядок некоторых элементов, я, вероятно, попробовал бы некоторые CSS хаки, но потом бросили бы эту затею и в расстройстве сделали бы это с помощью javascript. С flexbox же эта задача сводится всего к применению всего лишь одного свойства СSS.

Это свойство называется order . Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента - более низкие числа означают больший приоритет.

.conteiner{ display: flex; } /*Обратный порядок элементов*/ .blue{ order: 3; } .red{ order: 2; } .green{ order: 1; }

3.Горизонтальное и вертикальное центрирование

Вертикальное центрирование в CSS является одной из тех проблем, которые заставляют нас спросить себя: Как такую тривиальную вещь до сих пор так сложно сделать? И это на самом деле так. Если посмотреть в Google вертикальное центрирование CSS, то в результате поиска выскочит бесконечное количество различных методов, большинство из которых будут включать в себя таблицы и преобразования. которые предназначены для изготовления макета.

Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.

.container{ display: flex; /*Центр по главной оси*/ justify-content: center; /*Центр по вспомогательной оси*/ align-items: center; }
Пример

4. Создание полностью отзывчивой сетки (Responsive Grids)

Большинство разработчиков полагаются на готовые CSS фреймворки при создании адаптивных сайтов. Bootstrap является наиболее популярным, но есть и сотни других фреймворков, которые помогут вам справиться с этой задачей. Как правило, они хорошо работают и имеют множество опций, но имеют тенденцию быть довольно тяжелыми. Если вы все хотите сделать своими руками и вам не нужных громоздких фреймвокров, тогда Flexbox именно для вас!

Строка flexbox сетки представляет собой простой контейнер с display: block;. Внутри горизонтального столбца может быть любое количество элементов, размер которого устанавливается с помощью Flex . Гибкая модель адаптируется под размер окна браузера, так что эта схема должна отлично выглядеть на всех устройствах. Тем не менее, если все таки не хватит места на экране по горизонтали, то мы сможем решить эту проблему с помощью медиа-запроса.

.container{ display: flex; } .col-1{ flex: 1; } .col-2{ flex: 2; } @media (max-width: 800px){ .container{ flex-direction: column; } }

5. Создание идеального Sticky Footer (прилипающий футер)

Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.

html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%; } .main{ /*Основной раздел будет занимать все свободное место на странице*/ flex: 1 0 auto; } footer{ /*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */ flex: 0 0 auto; }

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

Для большей наглядности, во всех примерах используются макеты с прижатым футером . Поэтому обращаю ваше внимание на то, что некоторые блоки или свойства CSS, которые участвуют в создании колонок одинаковой высоты, уже изначально присутствуют в макетах. То есть в итоге они выполняют двойные функции - и футер к низу прижимают и колонки тянуть. Однако для большего удобства только те свойства, которые тянут колонки, будут снабжаться CSS-комментариями , причем неважно используются ли они еще для каких-то целей или нет.

Колонки одинаковой высоты с помощью позиционирования

Этот пример построен на принципе дополнительных псевдоколонок и абсолютного позиционирования. Для этого создается несколько блоков (по количеству колонок), которые растягиваются во всю высоту страницы и подкладываются под настоящие колонки. Для того, чтобы появился эффект колонок одинаковой высоты, этим псевдоколонкам задается необходимый фоновый цвет.

Описание примера

1. Все блоки макета были заключены в дополнительный блок-обертку id= "wrapper" , которому была задана минимальная высота (CSS ) в 100%, чтобы он растянулся во всю высоту окна браузера, но при необходимости мог тянуться и дальше. Но так как процентная высота считается относительно предка, то пришлось ее указать и для тегов и . Именно относительно этого оберточного блока мы будем позиционировать наши псевдоколонки, поэтому ему было добавлено свойство CSS :relative.
2. В нижней части макета были созданы сами псевдоколонки с id равным "menu_back" , "sidebar_back" и "content_back" , к которым было применено абсолютное позиционирование. Кроме этого у боковых псевдоколонок была указана ширина (CSS ) и координаты смещения (CSS , и ), а у центральной - только координаты смещения, чтобы они заняли такое же положение, что и настоящие колонки. Ну а чтобы псевдоколонки вытянулись во всю высоту блока-обертки, им задали свойство CSS :100%.
3. В результате действий второго пункта наши мнимые колонки хоть и вытянулись, как положено и заняли нужное положение, но при этом расположились поверх основных блоков макета. А все потому, что было использовано абсолютное позиционирование, которое вырывает элементы из основного потока. Чтобы это исправить, им было задано отрицательное значение CSS , которое «положило» их под макет. Все, готово.
4. В принципе от центральной псевдоколонки можно отказаться, просто задав нужный цвет для всей страницы сайта.

Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков :

1. IE6 не понимает , но зато работает с так, как будто это и есть минимальная высота. Также в определенной ситуации этот браузер игнорирует правило . Эти две особенности и были использованы, чтобы, с одной стороны, задать блоку-обертке минимальную высоту, а с другой - не помешать другим браузерам.
2. В этом примере IE6 растягивает псевдоколонки только на высоту «первого экрана», зато он понимает expression(document.body.offsetHeight), который динамически высчитывает высоту . Вот она и использовалась, чтобы постоянно подставлять нужное значение в свойство.
3. И все равно IE6 не тянет "content_back" , так как ширина у нее не задана явно. Тут конечно можно указать для нее ширину в 100% и «положить» еще ниже боковых собратьев, задав ей отдельно :-2, но стоит ли оно того?

Колонки одинаковой высоты с помощью фонового изображения

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

Фоновое изображение, которое использовалось в примере можно увидеть . Именно с помощью него была создана видимость колонок одинаковой высоты.

Описание примера

1. У фиксированного макета имеется блок-обертка, который, собственно, и делает макет фиксированным. Вот у него и устанавливается фоновое изображение (CSS ), которое размножается по вертикали.

Колонки одинаковой высоты с помощью полей и отступов

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

Описание примера

1. Для увеличения нижних внутренних отступов ко всем колонкам применяется свойство с очень большим значением.
2. Колонкам задается отрицательное нижнее поле (CSS ) равное указанному отступу. Однако в данном конкретном случае размер этого поля на 100px меньше. А все потому, что способ, который использовался в этом примере для прижатия футера, требует наличия нижнего отступа, равного по размеру высоте этого футера. Итого получаем: 30000px-29900px=100px.
3. Результатом действия второго пункта стало уменьшение высоты обертки (id= "wrapper" ) до таких размеров, как будто никакого увеличения колонок не было. То есть для него они стали равны высоте исходя из их содержимого (в нашем случае он прибавляет еще те самые 100px), хотя визуально они и остались в 30000px в высоту. Другими словами, они просто уходят далеко вниз за границу обертки.
4. К оберточному блоку применяется свойство CSS :hidden, чтобы обрезать все, что выходит за его рамки. В итоге имеем красивые колонки одинаковой высоты.

Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого - в IE6 все тянется, как положено.

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

Как вы знаете существует много решений подобной задачи, от подгонки контента под определённые параметры длинны, до програмного огрничения символов или подрезки всего, что выходит за грани заданного блока как в ютюбе например. Мне если честно ни один из них не по душе.

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

Как это работает?

Я создал контейнер ul с кучей элементов li внутри. Каждый элемент списка содержит некоторые элементы контента, такие как , ,

и

• Title

  Link

• Title

  Lorem ipsum dolor sit amet, consectetur adipisicing elit... Link

• Title

  Lorem ipsum dolor sit amet, consectetur adipisicing elit... Link

Всё, что необходимо для создания контейнера flexbox, это display: flex; Я добавил display: flex; На родительский элемент ul (.list), чтобы управлять его дочерними элементами (.list-items).

List { display: flex; flex-wrap: wrap; }

Теперь давайте добавим некоторые медиа-запросы. Мой макет будет начинаться с одной колонки на строку, пока размер экрана не достигнет 40em. Затем разместим по два элемента на строку до тех пор, пока размер экрана не достигнет 60em, затем макет переключится на три колонки в строке.

@media all and (min-width: 40em) { .list-item { width: 50%; } } @media all and (min-width: 60em) { .list-item { width: 33.33%; } }

Я добавил display: flex; К элементам списка, чтобы каждый элемент li растягивался по вертикали. По умолчанию Flex растягивает элементы по вертикали, поэтому колонки могут быть одинаковыми по высоте. Теперь это дает возможность управлять дочерними элементами, позволяя мне закрепить ссылки в нижней части каждого сообщения.

List-item { display: flex; padding: 0.5em; width: 100%; }

Ну и наконец display:flex; Применяем к.list-content, чтобы я мог стилизовать

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

List-content { display: flex; flex-direction: column; background-color: #fff; padding: 1em; width: 100%; } .list-content p { flex: 1 0 auto; }