Начинающие вебмастера, изучающие блочную верстку, часто сталкиваются с проблемой размещения на странице трех колонок по горизонтали. Известно ведь, что колонка, как и подобает обыкновенному блочному элементу, по-умолчанию будет находиться на воображаемой строке лишь в одном единственном экземпляре. Другой блок (читай — колонка) будет размешаться под первой внизу. Так уж устроен мир.
Известно также, что для решения данной задачи предусмотрено специальное правило, задающее “обтекание”, или иначе — float. Ну, хорошо, давайте возьмем следующую схему и попробуем применить к ней это полезное правило:
Голубой рамкой схематично обозначен общий контейнер, в котором у нас должны разместиться на одной горизонтальной линии три одинаковых блока с номерами 1, 2, 3. В листе стилей CSS мы первому блоку зададим такое правило:
#1 {float: left;}
Блоку номер 3 такое правило:
#3 {float: right;}
Но что нам делать с блоком номер 2? Какое правило задать ему: левое или правое “обтекание”? Вот именно на этом и спотыкаются многие начинающие верстальщики. По сути, нет никакой разницы, какое правило задать второму блоку. Но это в идеальных условиях. На деле же часто существует масса нюансов. К примеру, если это блоки из текста, но в каждом из них этого текста разное количество. Тогда возможна ситуация, когда один блок как бы “подлезает” под другой.
Поэтому чтобы раз и навсегда избавиться от подобных заморочек, есть очень простое решение, которое к тому же хорошо развивает пространственное мышление — штука для верстальщика весьма нужная и полезная. Следует упростить задачу. Если у нас будет всего лишь два блока, то и вопрос отпадет сам собой. А как из трех сделать два? Правильно! Нужно два из них объединить в один. Следующая картинка наглядно поясняет суть этого действа:
То есть, необходимо в коде страницы добавить еще один блок, в который войдут блоки 1 и 2. Назовем его, к примеру, subcontainer. Тогда в листе стилей CSS нам останется только прописать правила для этого нового блока, задав ему float: left; Внутри же него 1-й блок будет иметь все то же правило float: left;, а блок номер 2 — float: right;
Для наглядности приведу пример кода страницы и кусок листа стилей CSS:
<div id="container">
<div id="subcontainer">
<div class="1">Содержимое блока 1</div>
<div class="2">Содержимое блока 2</div>
</div>
<div class="3">Содержимое блока 3</div>
</div>
#subcontainer {float: left;}
#1 {float: left;}
#2 {float: right;}
#3 {float: right;}
Зачем такие сложности? Можно обойтись и одой оберткой.
‹div id=”container”›
‹div class=”1″›Содержимое блока 1‹/div›
‹div class=”2″›Содержимое блока 2‹/div›
‹div class=”3″›Содержимое блока 3‹/div›
‹div class=”clear”›‹/div›
‹/div›
.1, .2, .3 {float: left;}
.clear {clear: both;}
Вся прелесть этого метода в том, что можно не ограничивать себя тремя блоками.
Ответить
Хорошо, Денис, попробуйте в первом блоке положить большой кусок текста, а в двух других по одному короткому абзацу. Вы получите вариант, когда третий блок заползет под второй и оба они будут этаким “столбиком” прилеплены к первому блоку. Ваш вариант подходит лишь для равных по величине блоков.
Ответить
Ну а кто же мешает задать каждому блоку ширину?
Ответить
Есть более простые решения.
А уж от пустого блока с классом “clear”,
вообще, давно пора отказаться.
Ответить
:) Ребят, давайте так: есть иные способы? Окей! Покажите рабочие варианты. Это будет хотя бы полезно читателям.
Ответить
Забыл дать линк http://csslayouts.ru
Примерная база будет прирастать :)
Ответить
А на данный момент про три колонки есть только замануха “Макеты трехколоночные
Скоро…”. Если уж рекламируете свой проект, делайте это хотя бы корректно. Сделали бы пример сначала, что ли…
Ответить
К сожалению нет времени, но будет приблизительно так: http://trifler.ru/blog/i/koncept/middle_border_lcr_h.htm
Ответить
Это уже подходит в качестве примера. Удобно, что можно открыть сырец и увидеть всё интересное без подгрузки ещё каких-то файлов, да и без лишней мишуры, не относящейся к делу.
Надеюсь, время у вас таки появится и задумка будет развиваться достаточно динамично.
Ответить
Игорь, а зачем дизайн поменяли? Куда улыбочка делась?
Ответить
Здравствуйте, Светлана! А захотелось вот обновить чуток шаблон. Пусть будет немного строже. :)
Ответить
Я бы скорее ожидала появление “журнальной” темы, из тех, что сейчас более модные что-ли. А тут наоборот, в строгость потянуло. Мне буковок, что в фавиконе остались, не хватает. :)
Ответить
Увы, до “журнальной” темы я еще не дорос, ибо там активно используются custom fields, с которыми нужно еще разобраться хорошенько.
Ответить
Игорь, позвольте небольшое замечание - названия классов не должны начинаться с цифр.
Ответить
Да, верно. Это был всего лишь пример, и номера стоят для наглядности.
Ответить
Обычно при такой верстке возникает необходимость сделать так, чтобы родительский контейнер был резиновый, блоки внутри были фиксированной ширины и отодвигались друг от друга на одинаковое расстояние (эти самые расстояния меняются в зависимости от ширины родительского блока, резина короче).
В этом случае, на мой взгляд, нет ничего проще, чем применить табличную верстку.
Или есть какой-то более рациональный метод, который делает интересным применение блочной верстки?
В примере, приведенном в статье, вообще не вижу необходимости гемороится с блоками. Чем, в данном случае, плоха таблица?
Ответить
Вообще-то, для центральной колонки нужно задать margin-left и margin-right на ширину левой и правой колонок. Для центральной ширину ставить не надо. Тогда никуда она не будет подлезать.
Ответить
abunbux, как вариант - можно. Но не забывайте, что IE по-своему относится к margin-ам. Если у вас дизайн состоит из массы деталей, которые нужно точно состыковать, то придется для IE выписывать в отдельный лист стилей свои правила.
Ответить
‹div id=”container”›
‹div class=”1?›Содержимое блока 1‹/div›
‹div class=”2?›Содержимое блока 2‹/div›
‹div class=”3?›Содержимое блока 3‹/div›
‹div class=”clear”›‹/div›
‹/div›
.1, .2, .3 {float: left;}
.clear {clear: both;}
А мне понравился этот вариант, почему бы не сделать? действительно можно задать ширину)))
Ответить
Как можно сделать такую же навигационную панель как в этом сайте http://7k.cz/ ?
Ответить
Кстати в эксплорере 3 блок уходит вниз и вправо???
А когда я ему задал маленькую ширину так вообще половина сместилась за границу???
В то время как в мозиле все пучком???
Ответить
С эксплорером вроде бы разобрался, все ровно как в мозиле,
но есть одно но.
В данном браузере все на много больше , чем в мозиле и это не очень красиво смотрится. Почему так? и как решить эту задачу(что бы размеры были одинаковы или примерно одинаковы на во всех браузерах)???
Ответить
>>А мне понравился этот вариант, почему бы не сделать?
Можно и так. Только если центральный блок будет недостаточно длинным, то третий блок “подлезет” под него.
Что касается размеров в разных браузерах: ИЕ по-своему вычисляет отступы margin и это следует учитывать. Кроме того, в настройках браузера может быть задан размер шрифта. В ИЕ по-умолчанию установлен средний.
Про навигационную панель на 7k.cz - какая именно особенность интересует?
Ответить
Можно и так. Только если центральный блок будет недостаточно длинным, то третий блок “подлезет” под него.
Ну да, я и так сделал по вашему примеру)))
На счет навигационной панели, мне интересен тот факт, стирание рамки при наведении на ссылку мышкой(в месте ссылки) и фон у ссылок на сколько я понял сделан в фотошопе? или же это какое то свойство скрипта?
И еще важный момент опять таки по поводу эксплорера, а как же грамотно совместить? Потому что в мозиле все и так очень мелко, а в эксплорере просто здоровенно)))
Тот же сайт 7k.cz, я посмотрел он и в обоих браузерах смотрится нормально. Я конечно понимаю, что у него табличная верстка, но неужели нельзя, что-то придумать для блочной?
Ответить
И вообще где можно найти хорошие беслпатные скрипты вертикального меню?
Ответить
Этот эксплорер меня вообще вырубает.
Поставил цвет фона буквами не отобразил в то время как рамку показал, которую к слову тоже написал буквами.
ПОставил в цифры только тогда все получилось
Ответить
> На счет навигационной панели, мне интересен тот факт, стирание рамки при наведении на ссылку мышкой(в месте ссылки) и фон у ссылок на сколько я понял сделан в фотошопе?
Да, это обычное свойство ссылки - hover. Есть две картинки. У одной справа полоска границы, у второй ее нет, но есть пара закруглений справа и обводка границы по левой стороне. Это хорошо видно, если сохранить страницу с картинками и разглядеть их потом в папке с сохраненными файлами.
Ответить
Спасибо Игорь)))
А как же мне поступить с разными размерами в разных браузерах?
Ответить
Тут надо проверять файл CSS. Возможно идет путаница с заданными размерами шрифтов. Например, в одном наборе (для body к примеру) указаны %, а в последующих то в пикселях (px), то в пунктах (pt). Нужно привести все к одной единице измерения.
Ответить
Окей проверю.
А если не получится не могли бы вы принять мою папочку для проверки?
Ответить
Доброго времени суток Игорь.
Спасибо за хороший пример.
Работает, очень сильно помогло.
Но вот один вопрос. Почему нельзя через классы,
ведь в классах, даже необязательно ни чего брать в субконтейнер.
Просто левому меню прописать, float:left. Ну на худой конец так
а в
css
.subkontainer{clear:both;}
.left {float:left;}
Ответить
Здравствуйте, тезка! Если использовать свойство clear:both; то по обоим сторонам этого блока уже ничего не будет “плавать”, поэтому применить его не получится.
Ответить
Здравствуйте,меня интересует вопрос(не по уроку интересно у меня на сайте 3 колонки и та что посередине прописана через float: clearboth; и записана после первой и третей в коде))
Можно ли сделать так ,чтобы все колонки имели одинаковую длину и при этом были растяжими(в зависимости от контента)?
Ответить
Даниил, нет нельзя.
Ответить
Игорь,я хочу ролик ютуба выровнять по центру,я применю
ролик
а можно что-то попроще ?
Ответить
В каком смысле попроще?
Ответить
без применения . Может просто обычным тэгом для текста p-align text И так далее ?
Ответить
Попробуйте :)
Ответить
Спасибо за полезнейшую статью, стало немного понятнее и легче. Но у меня немного другая проблема. У меня есть 2 сайдбара, я хочу над ними разместить ещё 1, но когда я это делаю они выстраиваются 1 за 1 и как я только не пытался их вниз спихнуть - не получается, может подскажите?
Ответить