Фиксированная ширина, float плюс margin


Содержание

Фиксированная ширина, float плюс margin

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

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

1-ый способ

Этот метод предполагает, что мы устанавливаем некоторому элементу

Плюсы

  • Контент может динамически изменять высоту (высота не определена в CSS).
  • Контент не обрезается в случае, если для него недостаточно места.

Минусы

  • Не работает в IE 7 и меньше
  • Много вложенных тэгов

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Плюсы

  • Работает во всех броузерах.
  • Нет лишней вложенности.

Минусы

  • Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

3-ий метод

В этом методе, мы обернём div с контентом другим div-ом. Установим ему высоту в 50% (height: 50%;), а нижний отступ половине высоты (margin-bottom:-contentheight;). Контент будет очищать float и выводиться по центру.

Плюсы

  • Работает во всех броузерах.
  • Когда недостаточно места (например, когда уменьшено окно) контент не обрезается, появятся скроллбары.

Минусы

  • Думаю только один: что используется лишний пустой элемент.

4-ый метод.

Этот метод использует свойство position:absolute; для div-а с фиксированными размерами (шириной и высотой). Затем устанавливаем ему координаты top:0; bottom:0;, но поскольку у него фиксированная высота, то он не может растянуться и выравнивается по центру. Это очень похоже на общеизвестный метод горизонтального выравнивания по центру блочного элемента фиксированной ширины (margin: 0 auto;).

Плюсы

  • Очень просто.

Минусы

  • Не работает в Internet Explorer
  • Контент будет обрезаться без скролл-баров, если не хватает места в контейнере.

5-ый метод

С помощью этого метода можно выровнять по центру одну строку текста. Просто устанавливаем высоту текста (line-height) равной высоте элемента (height). После этого строка будет выведена по центру.

Плюсы


  • Работает во всех броузерах.
  • Не обрезает текст, если он не влез.

Минусы

  • Работает только с текстом (не работает с блочными элементами).
  • Если текста больше чем одна строка, то выглядит очень плохо.

Этот способ очень полезен для небольших элементов, например чтобы вырвнять по центру текст в кнопке или в текстовом поле.

Теперь вы знаете как добиться вертикального выравнивания по центру, давайте сделаем простой web-сайт, который, в конце-концов будет выглядеть так:

Шаг 1

Всегда хорошо начинать с семантической разметки. Наша страница будет структурирована следующим образом:

  • #floater (чтобы выровнять контент по центру)
  • #centred (центральный элемент)
    • #side
      • #logo
      • #nav (список
          )
      • #content
    • #bottom (для копирайтов и всего такого)

    Напишем следующую html-разметку:

    Шаг 2

    Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

    Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

    Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;

    Сейчас ваша страничка должна выглядеть приблизительно так:

    Ширина элемента #centered 80%. Это делает наш сайт уже на маленьких экранах и шире на больших. большинство сайтов выглядит неприлично на новых широких мониторах в верхнем левом углу. Свойства min-width и max-width также ограничивают нашу страничку, чтобы она не выглядела слишком широкой или слишком узкой. Internet Explorer не поддерживает эти свойства. Для него надо установить фиксированную ширину.

    Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

    Шаг 3

    И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

    Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

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

    Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

    Шаг 4

    Ну и самое последнее, мы добавим в наш дизайн кое-какие втили для ещё большей красоты.

    В этих стилях мы устанавливаем закруглённые углы для элемента #centered. В CSS3, за это будет отвечать свойство border-radius. Это пока что не реализовано некоторыми броузерами, разве только использовать приставки -moz и -webkit для Mozilla Firefox и Safari/Webkit.

    Совместимость

    Как вы уже наверное предположили, основной источник проблем совместимости — Internet Explorer:

    • Элементу #floater обязательно надо установить ширину
    • В IE 6 лишние отступы вокруг меню

    float и ширина

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

    Если мы задаём элементу свойство float:left или float:right , то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами.

    Зафлоаченному элементу можно явно задавать размеры и отступы.

    Есть тонкость, связанная со строчными элементами. Если зафлоатить строчный элемент, то он начинает вести себя как блочный, а именно: воспринимать размеры и отступы.

    • index.html Сплит-режим
    • style.css Сплит-режим

    Float’нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.

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


    Разметка с помощью float

    Один из методов создания разметки веб-страниц основывается на свойстве float . Мы изучали его во втором разделе учебника и показывали базовый пример использования float для верстки макета с несколькими колонками.

    На изображении ниже показан еще один пример того, как создать четырехколочный макет при помощи свойства float:

    Каждая колонка занимает ¼, или 25% всей ширины экрана. Четыре колонки выстраиваются одна за другой, четко помещаясь в один ряд, поскольку их ширина в сумме составляет 100%. Если увеличить ширину колонки даже на одну долю процента либо добавить сбоку margin , последняя колонка переместится вниз, поскольку уже не будет помещаться в родительский контейнер:

    Чтобы поменять колонки местами, начиная отсчет не слева направо, а наоборот, нужно всего лишь поменять значение свойства float с left на right :

    Обратите внимание, что значение свойства clear для элемента #footer мы также изменили на противоположное. В данном случае, чтобы облегчить задачу и избавиться от необходимости изменять значение свойства сброса обтекания при изменении свойства float , достаточно записать clear: both — тогда обтекание для футера будет отменено с двух сторон сразу.

    Поскольку по умолчанию блочные элементы занимают всю ширину экрана, важно определять через CSS ширину для float-элементов, чтобы освободить горизонтальное место под эти элементы и, собственно, увидеть сам эффект обтекания. Ширина может быть как фиксированной, так и относительной (как в нашем примере).

    Допустим, если мы укажем фиксированную ширину 960 пикселей для родительского контейнера, содержащего четыре плавающих блока шириной 25% каждый, то ширина одного блока составит 240 пикселей:

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

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

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

    Возможность такого перемещения позволяет не привязываться к порядку размещения блоков в HTML. К примеру, если ваш сайдбар должен находиться слева на странице, но вы не хотите, чтобы в HTML-документе он располагался первым, как на примере ниже, вам на помощь придет float.

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

    Еще одна причина — поисковые системы. Нередко роботы читают лишь небольшой отрывок кода HTML, и, если ваша веб-страница весьма длинная, а важная для поисковых систем информация находится где-то в ее конце, робот может до нее не дойти.

    На скриншоте ниже показано, каким образом можно изменить порядок следования HTML-тегов, при этом сохранив внешний вид страницы идентичным. Мы обернули блок с основным контентом и первый сайдбар в тег

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

    Вложенные float-элементы

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

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

    Немного о grid-системах

    Сетка (англ. grid) использовалась дизайнерами еще до эры Интернета. Grid-система — это набор колонок и рядов, которые помогают правильно разместить элементы макета.

    Самая распространенная grid-система имеет 12 колонок одинаковой ширины, между которыми, как правило, есть небольшое расстояние. Такое количество столбцов вовсе не означает, что вам нужно создавать сайт с двенадцатью колонками. Вы можете сделать макет с любым количеством колонок, разделив 12-колоночную сетку на группы. Допустим, если макет состоит из трех колонок, то можно сделать эти колонки одинаковой ширины, каждая из которых будет занимать 4 столбца grid-системы. Либо под две колонки отвести половину сетки (6 столбцов), тогда как третья колонка займет оставшееся пространство сетки (еще 6 столбцов).

    Пример того, как выглядит 12-колоночная сетка:

    Подобная сетка гибкая и простая в использовании, она позволяет создавать разнообразные макеты, в то же время придерживаясь общей измерительной схемы. Зачастую в CSS grid-системах есть ряды и колонки, которые через классы именуются как .row и .column (либо .col ) соответственно. Колонки помещаются в ряды, а внутрь колонок — содержимое либо вложенные ряды с колонками. Одним из распространенных CSS-фреймворков, которые используют grid-систему, является Bootstrap.

    Полное руководство по использованию отрицательных полей margin в CSS

    Есть несколько точек зрения на использование отрицательных полей ( margin ) в CSS, как резко отрицательное, так и сугубо положительное.

    Отрицательное поле в правиле CSS выглядит следующим образом:

    Отрицательные поля, как правило, используются в малых дозах, но, как вы увидите позднее, они способны на большее. Есть несколько вещей об отрицательных полях, которые необходимо знать (чтобы не ошибаться при верстке):

    • Валидность в css
      W3C говорит нам: ‛Отрицательные значения для свойства margin использовать допустимо“. Более подробно на www.w3.org/TR/CSS2/box.html#margin-properties
    • Отрицательные поля не ХАК
      Это идет от непонимания и от внешнего воздействия отрицательного margin на верстку. Отрицательное поле может стать хаком лишь тогда, когда вы пытаетесь поправить ошибку в своем коде при помощи отрицательного margin .
    • Воздействие на поток
      Отрицательные поля не разрушают поток, если применяются к ‛не плавающим“ элементам. То есть если вы используете отрицательно поле, чтобы толкнуть элемент вверх, то все последующие элементы также будут приподняты.
    • Разная реакция, когда используется совместно с float
      Отрицательные поля это все же не повседневный CSS, поэтому вы должны использовать такой margin с осторожностью.
    • Какие-то проблемы dreamveawer
      Тут и обсуждать нечего.
    • Полная совместимость
      Отрицательные поля поддерживаются всеми браузерами, включая IE6.

    Работаем с отрицательными полями ( margin )

    Отрицательные поля очень мощная штука, когда используется корректно.

    Отрицательное поле и статический элемент

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

      Когда статический элемент получает отрицательный margin для top/left, то элемент ‛движется“ в указанном(top/left) направлении.

    Отрицательное поле для плавающих элементов

    Рассмотрим следующую разметку:

    • Если отрицательное поле применяется к плавающему элементу, то создается пространство, приводящее к перекрытию контента. Это замечательно для жидких макетов, где одна колонка имеет ширину 100% , а другая колонка, например, фиксированную ширину в 100px .

    Эффективные техники, основанные на использовании отрицательного margin

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

    Создание простого 3-колончатого списка из обычного неупорядоченного списка

    Если у вас есть список, в котором так много пунктов, что показывать их по вертикали неразумно, то почему бы не разделить такой список на три колонки?

    Отрицательные поля справятся с этим, причем без использования дополнительных тегов и свойства float . Просто удивительно, как легко разделить список на три колонки, например:

    Назначив margin-top:-2.6em (удваиваем line-height для тега li ), все элементы выровняются по верхней границе.

    Наложение контента при помощи дополнительного акцента.

    Перекрытие элемента с определенной целью хороший дизайнерский шаг. Это добавляет акцент к определенным элементам, так как создает илюзию глубины. Хорошим примером может послужить счетчик комментариев на Phlashers.com, где используется техника наложения, чтобы привлечь внимание на число комментариев. Объедините это с z-index и проявите немного креативности для вашего дизайна.

    3d-текст

    Создать скошенный текст легко: создайте две версии одного и того же текста и при помощи отрицательного поля сместите первую копию с текстом на 1-2 пикселя относительно второй копии с текстом.

    Простой двухколончатый макет


    Отрицательный поля также помогут создать простой двухколончатый жидкий макет, где правая колонка, например, имеет фиксированную ширину, а основная колонка имеет ширину в 100% .

    И вы создали простой 2-колончатый макет в рекордно короткое время, данные прием работает и в IE6. Теперь чтобы предотвратить врезку текста внутри #content добавьте следующий код:

    Отрицательные поля позволяют создать достаточно гибкую структуру, вот, например, жидкий и отзывчивый макет (сетка profoundgrid), основанный на использовании отрицательных полей fluidresponsive.html

    Подталкивание элементов в пространстве

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

    Заключение

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

    CSS — margin and float property

    We have a div with static positioning. Inside we have a paragraph with a margin. The height of the div will be the paragraph without the margin

    We have a div with float:left. Inside we have a paragraph with a margin. The height of the div will be the paragraph plus its margin.

    What is the explanation of this?

    Here is the html code:

    And the CSS code:

    And here is a link to the test site.

    4 Answers 4

    After several edits, I think I have got the answer now :)

    I have also experienced this puzzling behaviour. I think part of the explanation is in section 10.6.7 of the CSS2.1 spec:

    In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

    If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

    If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block- level child box.

    Those «certain cases» listed in section 10.6.6 include floating elements.

    The #nivel21 element in the question is a floating element, and it contains block-level children (a

    ), therefore this special-case rule is applied and the height of the

    Secondly, this page about collapsing margins may give a clue as to why the height of #nivel22 does not include the margins of the

    The [. ] margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page [. ]

    tag has an implicit margin (10px in my tests), which needs to collapse with the 2em margin of the outer #nivel1 element, so for this reason the browser pretends that the

    tag has no margin at all (it puts it on #nivel22 instead), which means that the height of #nivel22 shrinks down to the line-height of the

    I hope this answer makes sense to someone other than me!

    Float и clear — CSS свойства для плавающих элементов при блочной верстке

    Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! После весьма существенного перерыва я решил продолжить тему изучения CSS и сегодняшняя статья будет посвящена созданию плавающих элементов посредством float, на практических примерах рассмотрим действие данного правила вкупе со свойством clear для создания колонок и горизонтального меню.

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

    Плавающие элементы встречаются также в HTML при необходимости создать обтекание тех же изображений текстом (атрибут align тега img с параметрами left и right). Так что этот аспект весьма популярен при разработке содержания вебстраниц.

    На протяжении сегодняшней публикации разберем действия правила float (left, right, none) и clear в том числе применительно к тегам DIV и SPAN, которые являются основой при блочной верстке. Конечно, на современном этапе подавляющее большинство использует при создании сайта прогрессивные CMS (в частности, WordPress). Однако, поверьте, что знания основ стилей и языка гипертекстовой разметки сослужат вам добрую службу в дальнейшем.

    Как создаются плавающие элементы в CSS с помощью float

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

    Одним из таких инструментов является, к примеру, CSS position (relative, absolute, fixed), о котором подробнее можете почитать по приведенной ссылке. Ну а другим средством, позволяющим изменить порядок стандартного отображения вебэлементов, как раз и служит правило float.

    Данные по любому свойству (propety) CSS и его значениям можно почерпнуть со страницы спецификации W3C, где дана полновесная информация (данные по второй версии таблиц стилей, но это справедливо и для CSS3, которая уже действует официально, хотя до конца не доработана):

    Как видите, float может принимать один из трех возможных параметров (left, right, none) и наследует значение родителя (inherit). Параметр float none применяется по умолчанию и означает, что элементы будут отображаться в порядке, соответствующем обычному потоку. А вот right или left позволяют создавать плавающие блоки со смещением вправо или влево соответственно.

    Если помните, наиболее часто используемые HTML теги делятся на строчные и блочные, которые ведут себя по-разному (вообще, тип отображения всех элементов реализуется средствами CSS с помощью свойства Display). Блочные занимают всю доступную ширину, если не указано значение width. Высота определяется содержимым, ежели параметр height не прописан.

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

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

    С тем, чтобы убедиться в правильности выше сказанного, возьмем два строчных тега, прописав для них свойства width и height, а также один блочный тег. С целью обеспечения наглядности зададим цветовые оттенки для каждого блока с помощью background (аналогично можно использовать background-color):

    Результирующая картинка будет следующей:

    Как видите, мы получили практическое подтверждение, что указанные высота (height:50px) и ширина (width:450px) не работают в обычных условиях для тега SPAN, который является строчным. Далее попробуем прописать свойство float right для первого строчного вебэлемента и float left для второго:

    В итоге получаем:

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

    Более того, вебэлементы, определяемые строчным тегом SPAN, по другому стали взаимодействовать с соседним контейнером DIV. Если далее убрать, скажем, атрибут width из стилей обоих тегов SPAN, то их ширина будет определяться содержанием (в нашем случае длиной текста с названием элементов):

    Теперь содержимое блока DIV начинает обтекать справа вэбэлемент с float: left. Есть смысл более наглядно ознакомиться с результатами конкретных практических изысканий на этой вебстранице, где вы можете сами попробовать менять область просмотра и понаблюдать, как поведут себя блоки по отношению друг к другу:

    Подытоживая, определим некоторые особенности, которые будут присущи контейнеру с тем или иным значением свойства float (right или left):

    • Элемент смещается к левому или правому краю;
    • Он становится блочным вне зависимости от того, каким он был до этого;
    • Ведет себя таким образом, как будто соседних блочных вэбэлементов (с правилом display:block) не существует. В этом вы можете убедиться, если еще разок взгляните на скриншоты данного раздела статьи;
    • В то же время строчные теги (display:inline) будут обтекать плавающие блоки. Если вновь посмотрите на предыдущий скриншот, то заметите, что содержание DIV контейнера («Блочный элемент») обтекает SPAN с float:left справа.
    • Если явно не указывать ширину плавающего блока (в нашем примере width:450px), то она будет определена его содержимым;

    В данном примере мы рассмотрели основные черты плавающих блоков с разными параметрами свойства float и выбрали для усложнения задачи и строчные, и блочные вебэлементы (с различными значениями Display). В качестве закрепления материала обязательно посмотрите информативный видеоролик от Е.Попова:


    Каким образом сделать горизонтального меню посредством CSS (float)

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

    Получим примерно следующее:

    Теперь немного подредактируем полученное меню с помощью CSS свойств: уберем маркеры напротив каждого из пункта при помощи list-style none, преобразуем строчные теги гиперссылок в блочные, применив к ним правило display block, а также для разнообразия придадим каждой из них приятный фон.

    Также нелишним будет задать отступы margin, чтобы еще более улучшить дизайн, немного отодвинув пункты меню друг от друга. Для вебстраниц сайта WordPress можно задать тегу UL class «menu», для которого указать необходимые стили в файле STYLE.CSS:

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

    Разница с предыдущим вариантом разительная, не правда ли? Теперь мы получили картинку, которая гораздо больше напоминает классическое меню. Правда, пункты в нем расположены не горизонтально, а вертикально. Для полного решения задачи нужно дописать для элемента HTML списка LI свойство float left, полностью правило CSS для него станет таким:

    В итоге менюшка превратиться в горизонтальный вариант:

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

    «Пункт 2» также передвинулся налево, но дальнейшее его продвижение блокировалось первым вэбэлементом меню. И так далее. В результате мы получили горизонтальную последовательную цепочку всех составляющих менюшки. Вы можете сами посмотреть здесь все детали. Теперь попробуем искусственным путем уменьшить ширину области просмотра:

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

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

    Тогда «Пункт 3» будет выравнивать свое положение по нижней границе последнего вэбэлемента в верхнем ряду и только потом переедет влево. Все описанные выше телодвижения должны помочь вам осмыслить суть воздействия float на расположение вебэлементов страницы.

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

    Эффект применения свойства clear (both, left, right)

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

    Правило CSS clear имеет четыре возможных значения, причем property none является параметром по умолчанию, что вполне естественно, поскольку в этом случае обеспечивается стандартный поток кода. Также clear (none, left, right, both) наследуется от родительского тега (inherit).

    Суть этого правила, прописанного для определенного блока, заключается в отмене действия в зависимости от его значения:

    • none — отменяет действие самого свойства clear, в результате содержание тега (например, текст) обтекает вэбэлемент в соответствии с заданными ему стилями в виде float;
    • left и right — ликвидирует обтекание соответственно с левого либо правого края;
    • both — препятствует обтеканию одновременно справа и слева. Это самый распространенное значение clear в практическом использовании.

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

    Итак, возьмем два контейнера DIV, которые схематически могут представлять из себя 2 колонки. Пропишем для них CSS свойства, включая фиксированную ширину (width), цвет фона и превратив их в плавающие с помощью float left. Добавим к ним текст, заключенный в тег P, который, как известно, является строчным:

    Блоки DIV выстроятся в горизонтальный ряд, причем первый займет крайнее левое положение, насколько это возможно. А второй припаркуется к его правому краю (для него это будет расположение слева), дальше не позволит сдвинуться первый див. А вот текст продолжит этот ряд, так как общая ширина позволяет это сделать:

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

    Опять же можете сами посмотреть вот здесь, как поведут себя все элементы, искусственно сужая-расширяя область просмотра. Чтобы устранить описанные недостатки, добавим контейнер со свойствами CSS и поместим внутрь его все имеющиеся слои. А также добавим дополнительно пустой DIV с правилом CSS clear both, чтобы запретить обтекание содержанием нижнего блока (текстом) колонок справа и слева:

    Обратите внимание, что к стилям большого дива я добавил правило margin:0 auto, с помощью которого можно выровнять контейнер по центру. Результирующий вид будет таковым:

    Теперь наша задача решена, поскольку итог соответствует поставленным условиям: две колонки расположены в горизонтальном ряду, а содержание ниже стоящего в коде вэбэлемента (ТЕКСТ) будет жестко оставаться на своем законном месте под колонками.

    При уменьшении ширины просмотровой области конструкция будет оставаться в прежнем виде (при этом образуется горизонтальная прокрутка), в чем вы можете убедиться, перейдя на соответствующую вебстраницу с решением данного примера. В качестве дополнения посмотрите видео от Евгения Попова, где дается пример разметки вебстраницы с применением float и clear (очистка обтекания):

    Примеры использования float

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

    Создание врезок

    Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает её с других сторон (рис. 1).

    Рис. 1. Вид врезки

    Чтобы врезка выделялась в тексте, у неё обычно устанавливают фоновый цвет и добавляют рамку (пример 1).

    Пример 1. Добавление врезки

    При создании врезок желательно ограничить её ширину с помощью свойства width . Иначе размер блока окажется гораздо шире, чем это требуется.

    Горизонтальное меню

    Для создания различных меню обычно применяется элемент

      , он обеспечивает наглядную структуру и его легко стилизовать. Предварительно следует убрать у него исходное оформление, в частности, обнулить все отступы и убрать маркеры у пунктов списка. Для размещения по горизонтали к селекторам l i добавляем свойство float со значением left (пример 2).

    Пример 2. Горизонтальное меню

    Результат данного примера показан на рис. 2.

    Рис. 2. Горизонтальное меню

    Галерея

    Для создания галереи фотографий мы воспользуемся элементом , к которому добавим стилевое свойство float со значением left . Само изображение и подпись к нему вставляется внутрь через элементы и (пример 3).

    Пример 3. Создание галереи

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

    Двухколоночный макет

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

    1. Ширина всех колонок задана в процентах

    Если ширина каждой колонки известна, то нам достаточно указать её через width и добавить свойство float со значением left (пример 4). Естественно, общая ширина колонок не должна превышать 100%.

    Пример 4. Двухколоночный макет

    float позволяет менять порядок элементов к коде, тем самым меняя и расположение колонок. Если sidebar и content переставить местами, то колонка с содержимым окажется уже слева.


    Класс row введён для универсальности и отменяет действие float ниже колонок, к примеру, для корректного добавления подвала.

    2. Ширина левой колонки задана, правая занимает оставшееся пространство

    Для макета, где ширина левой колонки задана в пикселях, свойства float и width применяются только к левой колонке. При этом край правой колонки смещается с помощью свойства margin-left на ширину левой колонки или превышает её (пример 5).

    Пример 5. Использование margin-left

    В данном примере левая колонка остаётся фиксированного размера, а правая занимает всё остальное доступное пространство (рис. 4).

    Рис. 4. Двухколоночный макет

    3. Ширина правой колонки задана, левая занимает оставшееся пространство

    Код похож на предыдущий пример, HTML остаётся прежним, а в стилях меняем значение float на right и ставим margin-right вместо margin-left (пример 6).

    Пример 6. Использование margin-right

    Трёхколоночный макет

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

    Принцип вёрстки этого макета похож на двухколоночный — боковые колонки в коде HTML ставятся выше остальных и к ним добавляется свойство float со значением, соответствующим стороне расположения ( right для правой колонки, left для левой). Также требуется свойство width , оно задаёт ширину боковых колонок, при этом ширину можно указывать в пикселях или в процентах. Для центральной колонки используем свойства margin-left и margin-right со значениями, соответствующими ширине левой и правой колонок (пример 7).

    Пример 7. Трёхколоночный макет

    В данном примере ширина левой колонки задана как 200 пикселей, а правой — как 20% (рис. 5).

    Виды 2-хколоночных макетов на основе свойства float

    Двухколоночные макеты — это довольно распространенный вариант верстки сайтов, например, созданных на платформе WordPress.

    Чаще всего (пока, во всяком случае), они верстаются на основе плавающих элементов, т.е. таких, которые имеют свойство float со значением left или right. Проблемой чаще всего выступает размер боковой колонки с таким css-правилом, т.к. он обычно бывает невелик и «не дотягивает» до низа сайта.

    Чтобы сформировать колонки одинаковой высоты, есть несколько подходов. Рассмотрим их все на примерах. Но сначала договоримся об общей структуре сайта.

    Традиционно 2-хколоночный макет состоит из шапки, основной части, разделенной на 2 неодинаковые части: котентную и боковую (сайдбар), и подвала. В HTML5 появились новые семантические теги, которые отвечают за определенные элементы страницы, которые ранее имели вид div-ов с id или классом.

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

    В каждом из html-файлов примеров будет одна и та же структура в :

    Раскладка в CSS: float

    Длинная эпопея с написанием статьи о свойстве «float» завершена. Пусть времени ушло много, но мне думается, что мне удалось максимально доходчиво свести все многообразие поведений этого мощного и несколько странного свойства в одну общую систему.

    Кроме того, эта статья содержит рекордное количество иллюстраций среди всего «Учебника» :-)

    Судьба свойства «float» в CSS слегка похожа на судьбу тега «table» в HTML: ни то, ни другое вообще не задумывалось как средство создания колонок и вообще раскладки элементов. Однако из-за определенных несовершенств механизма позиционирования float используется для этой цели очень широко. А то, что придумывался он для другого, частенько проявляется разными неочевидными эффектами. Однако перед тем, как их показать, я все же расскажу, как float’ы можно применять для раскладки.

    В самом начале — небольшое замечание о терминах. В русском языке не сложилось никакого известного термина для этого инструмента (пока, по крайней мере). Поэтому я предпочитаю писать его в исходном написании — «float». Читается это примерно как «флоут» (ломать скулы произношением «флоАт» не нужно). Заодно тут же прошу простить мне такие вольности как «заfloat’ить», «приfloat’нутый» и т.п. :-)

    Принцип работы

    Как и позиционирование, float используется для того, чтобы двигать боксы. Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.

    При этом сам бокс и следующие за ним в потоке приобретают интересное поведение:

    1. Float’нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.
    2. Float’нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.
    3. Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float’нутого бокса в потоке не было.
    4. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float’нутый бокс со свободной стороны.

    Хочу еще раз подчеркнуть неочевидную сразу вещь: сама коробка блока, следующего за float’ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.

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

    Есть еще один маленький технический аспект, не обязательный для понимания всей «механики». Заfloat’ить можно как блочные боксы, так и строчные. При этом строчные тут же автоматически становятся блочными. То есть, писать display:block; для float’а излишне.

    Из двух описанных особенностей float’ов — прижимание к краю и стыкование сбоку друг друга — вытекают два основных применения их в раскладке:

    • разделение страницы на колонки
    • горизонтально расположенные меню

    Колонки

    Колонки — это когда блоки текста расположены рядом друг с другом и имеют одинаковую высоту.

    Все колоночные раскладки я буду рассматривать на вот таком простейшем HTML’ном коде с двумя блоками:

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

    Пропорциональная ширина

    Если нужно, чтобы ширина колонок менялась пропорционально, при изменении ширины страницы, то подход такой:

    То есть два блока float’ятся рядом в разные стороны, а их ширина делится в нужном процентном соотношении. Этот способ позволяет легко поменять колонки местами — просто поменяв значения right и left .

    Растягивание только одной колонки

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

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

    Итак, для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat’им на это место:

    Но у второго способа есть один очень серьезный недостаток. Обратите внимание, что в исходном HTML блок «sidebar» идет до блока «content» с основным содержимым. Не нужно думать, что так сделано случайно :-). Так сделано специально, потому что иначе этот самый второй способ с наложением колонки поверх margin’а не работал бы.

    Как я написал в начале статьи, float’ы сдвигаются только в сторону и дают место следующим блоками, которые съезжают наверх. Поэтому принципиально, чтобы «sidebar» был уже наверху, и тогда основной блок подъедет к нему. Если «sidebar» идет после основного блока, то он так и останется ниже, и ни на какие колонки это похоже не будет.

    Это действительно плохо, потому что перечеркивает одну из основных идей CSS: отделение оформления от содержания. Получается, что мы захотели изменить только дизайн, а если блоки расположены «не так», то придется лезть еще и в HTML-шаблоны. Кроме того, с точки зрения структуры могут быть свои веские основания располагать блоки так, а не иначе. Например чтобы пользователь мог начать читать основной текст страницы, не дожидаясь загрузки навигации.

    Фиксированная ширина


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

    Высота колонок

    Опять-таки, я далеко не случайно «отрезал» на картинках нижнюю часть блоков :-). Иначе бы они как колонки совсем не выглядели, потому что, как нетрудно убедиться, если применить те фрагменты CSS, что я привел, и раскрасить колонки разными цветами, то их высота оказывается разной. Она зависит от количества содержимого в этих блоках.

    Этот некрасивый эффект можно обойти несколькими способами.

    Первый способ называется «Ложные колонки» («Faux columns»), опубликован в авторитетном веб-журнале A List Apart в сентябре 2004 года и с тех пор пользуется большой популярностью. Всем рекомендую прочитать либо оригинал, либо русский перевод. Однако если вы сегодня не в настроении кликать, то вот кратко его суть.

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

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

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

    Суть состоит в том, чтобы поместить фоновую картинку только под ту колонку, ширина которой известна. Остальное место будет занято фоновым цветом контейнера, а не картинкой.

    Возьмем наш пример и сделаем колонку «sidebar» справа шириной 200 пикселов, а «content» пусть растягивается. Для «sidebar» подготовим картинку размерами 200х1 например ровного синего оттенка. А под «content» отведем желтоватый.

    В стилях это выглядит так:

    Единственное правило для контейнера (body) задает все поведение фона:

    • указывается URL картинки (bg.png)
    • цвет фона в тех местах, где ее не будет (#FFD)
    • положение картинки прижатой к правому краю (right top)
    • повторение картинки вниз (repeat-y)

    В реальном примере в CSS еще была пара правил для цвета букв и борьбы с границами, которые сейчас не существенны.

    Идея его состоит в том, чтобы неравенство высот колонок спрятать, неимоверно удлинив их вниз, чтобы их концы были за пределами реального содержимого страницы. Добиваются этого тем, что сначала ставят колонкам очень большой отступ (padding) вниз, который закрашивается цветом фона. А чтобы все остальное содержимое тоже не сдвигалось туда далеко, колонкам назначается отрицательная граница (margin) такого же размера:

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

    В итоге все, что идет за колонками смещается и находится прямо под содержимым самой длинной из них, а колонки удлиняются вниз. Некрасиво одно — из-за длинных колонок сама страница становится такой же длинной. Чтобы с этим бороться, надо их контейнеру проставить свойство overflow:hidden , которое заставляет контейнер просто отрезать и не показывать то, что выходит за его пределы.

    У моего примера, который я взял в самом начале, есть, правда, одна загвоздка. Там колонки лежат прямо в body . А если body проставить overflow:hidden , то браузеры отменяют скроллинг у страницы начисто. Даже если реальное содержимое выше окна. Поэтому колонки надо завернуть в еще один элемент, например div . Но справедливости ради надо сказать, что на практике колонки и так бывают во что-нибудь уже завернуты.

    Засада

    Куда ж без нее :-). Как я не особенно прозрачно намекнул в самом начале, поскольку float’ы не придумывались как средство создания колонок, это обязательно вылезет чем-нибудь уродливым и аукнется увеличением расхода анальгина (некоторые предпочитают темпалгин или парацетамол).

    Причем «вылезет» — в прямом смысле. Давайте немного подвинем наш «голый» пример в сторону реальности, добавив над колонками шапку и внизу какой-нибудь тоже блок с текстом.

    Для простоты выберем нехитрый колоночный дизайн с фиксированной шириной. Шапку и нижний блок сделаем синими с белыми буквами, основное содержимое белым, а дополнительную колонку тоже синей, но чуть светлее. Цвета колонкам зададим способом «Faux columns».

    Всякие отступы и шрифты я снова опустил для простоты восприятия. Добавим тестового текста и запускаем:

    Хм. Ну, колонки, в общем, даже можно разглядеть! Не придерешься! Однако как ни крути, но выглядит все не так, как задумано, а даже можно сказать, все превратилось в некую кашу из цветов и букв.

    Чтобы понять, почему так происходит, надо вспомнить описание того, как работает float. А именно, что блоки, идущие за float’ами перестают эти float’ы замечать и подтягиваются вверх. Более того, сам контейнер, в котором float’ы находятся, тоже перестает их замечать и float’нутые блоки проваливаются через низ контейнера, если он заканичвается раньше.

    Теперь посмотрим на наш код. Оба float’нутых блока «content» и «sidebar» находятся внутри блока «main». И больше ничего в «main» нет. А раз ему нечего больше содержать, то его высота схлопывается в нуль! Поэтому и не видно на картинке ни белого фона «content», ни светло-синего фона «sidebar», потому что эти цвета назначены в виде фона «main».

    Дальше — «footer». Он, подчиняясь все тому же правилу, тоже не видит float’нутых блоков и подтягивается наверх прямо к самому заголовку (поскольку «main» — нулевой высоты). Но в «footer» есть текст. Текст этот уже должен обтекать float’ы: справа «content» и слева «sidebar». Между колонками места не осталось, поэтому текст может начаться только под одной из колонок, которая первая кончится. Там он и есть. Таким образом, «footer», подтянувшись под заголовок, продолжается вниз, пока не закончится весь его текст. И весь этот синий фон, что ниже заголовка — это «footer» и есть.

    Зачем такая сложность

    Описанное поведение должно внушать недоуменние. Зачем надо было придумывать такие сложности: разделить понятие блока так, чтобы цвета и рамки наверх, а текст — на месте? Но смысл, конечно, есть. Это, наряду со схлопыванием границ, попытка заставить боксовую модель CSS нормально вести себя в условиях простого потока текста. Подробное классическое объяснение этому феномену есть все у того же Эрика Мейера в статье «Containing Floats» (на английском). Постараюсь кратко передать суть.

    Представьте себе обычный поток абзацев — блоков с текстом — без всякого позиционирования. В одном из абзацев встречается картинка, которую хочется сдвинуть, скажем, влево, чтобы текст ее обтекал. Такое раньше в HTML достигалось свойством align=»left» , но в духе вынесения оформления из HTML в стили, для этой функции как раз и придумали свойство float. То есть вместо align этой картинке приписывается float:left .

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

    Решения

    Итак, поведение с проваливанием понятно, но оно удобно для непозиционированного текста, а для раскладки — совсем неудобно. Существует два подхода устранящих оба проявления этого свойства: подтягивание следующих боксов наверх и проваливание через низ контейнера.

    Для устранения подтягивания блоков существует специальное свойство — clear . Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float’ов. Причем можно управлять, с какого именно бока не должно быть float’ов:

    clear:left следит, чтобы float’ов не было слева clear:right следит, чтобы float’ов не было справа clear:both следит, чтобы float’ов не было с обеих сторон

    Таким образом, если мы скажем нашему «footer»у:

    . чтобы слева и справа от него не было float’нутых колонок, то он сдвинется вниз как раз туда, где они обе кончаются.

    Но это не решает другой проблемы: того, что float’ы проваливаются через «main», и тот схлопывается, в результате чего не видно колоночного фона, который ему назначен. Проваливание можно победить двумя способами.

    Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float’ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет.

    Другой интересный способ связан с побочным эффектом свойства overflow . Само по себе оно предназначено для того, чтобы определять, как будет вести себя контейнер при переполнении, когда не может вместить свое содержимое. У него есть четыре значения:

    visible содержимое переходит через край и его нормально видно (это поведение по умолчанию) hidden содержимое отсекается за границами контейнера и его там никак не видно auto если содержимое переполняет контейнер, у него появляется скроллбар, позволяющий проматывать содержимое, если нет — не появляется scroll похоже на auto , только скроллбар у контейнера есть всегда, даже когда содержимое его не переполняет

    Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible , он вдруг растягивается и заключает в себя float’ы, которые в нем сидят, устраняя проваливание.

    Какой же overflow использовать? Сразу отпадает scroll — всегда висящие скроллбары явно не нужны. Остаются auto и hidden , которые отличаются только тем, появляется скроллбар при переполнении или нет. Но у нас никакого переполнения нет, наоборот, этим свойством мы заставили контейнер дополнительно растянуться, чтобы он охватывал все свои элементы. Поэтому использовать можно любое значение.

    Я суеверно стараюсь использовать hidden , чтобы не появлялось скроллбаров, если из-за каких-то глюков переполнение вдруг возникнет.

    У решения с overflow есть одна загвоздка, связанная с поведением Некоторого Браузера™. Оно работает только если контейнеру явно назначены ширина или высота. Из-за этого им иногда неудобно пользоваться, когда вам нужны автоматические размеры, а не жесткие.

    Итак, в итоге, чтобы исправить наш пример с колонками, надо сделать так:

    Кстати! Если бы для рисования фона под колонками я использовал не faux columns, а способ с длинным padding’ом, то он бы потребовал использовать overflow:hidden для «main», что заодно решает и проблему с проваливанием. Но как бы тогда я про это рассказывал?

    Все на этом с колонками. Время сходить налить себе вкусного чаю (многие предпочитают кофе) и, прибавив к этому какую-нибудь вкусную булочку, сделать паузу для укладывания в голове всего этого месива. Дальше нас ждет маленькая добавка — про меню.

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

    Возьмем такой список:


    Чтобы это было похоже на меню, надо заfloat’ить все li влево, убрать у них атрибутику списка (отступы и буллиты) и еще добавить для красоты отступы, фон и рамку:

    Обратите внимание, что для раскладки все свойства назначаются и для элементов ul , и для li . Это удобно свести в одно правило, потому что:

    • float:left нужен элементам списка, чтобы они разложились горизонтально, а самому списку — чтобы элементы через него не проваливались;
    • нулевые margin и padding устраняют отступы, которые браузеры делают для списков по умолчанию, но они это делают очень по-разному, поэтому проще сказать «всем всё по нулям», чем помнить что отдельно для какого элемента проставлять.

    Мораль

    Механизм float — еще одно средство раскладки наряду с абсолютным позиционированием.

    Он отличаются в лучшую сторону, позволяя оставить элемент в потоке, что очень удобно для колоночной раскладки.

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

    Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.

    Комментарии: 94 (особо ценных: 1)

    Спасибо! Ох, сейчас, почитаю. =))
    Ещё не прочитал, но пролистав страницу заметил краем глаза, что вы описываете меню . А вы в курсе что существует такой тэг как MENU =)) который технически равняется OL . только семантически более уместен =)
    Я просто сам обнаружил наличие подобного тэга только недавно. Уже успел его применить. Вроде как осложнений не вызывает.
    Может я чего-то про него не знаю — что объясняет столь редкое его использование . ?

    В курсе. Однако технически он не «равняется» OL. Хотя бы потому что у OL есть цифры. Если уж он и на что похож технически, то на UL.

    А вот семантически MENU — устаревший (deprecated) элемент, поэтому он как раз не более уместен, а совсем неуместен :-). Так что сейчас единственный хорошо подходящий элемент для навигационных меню — это UL.

    P.S. Кстати, в разрабатываемом HTML5 элемент MENU пересматривают. Возможно он будет реализован в виде нативного для платформы меню.

    Да. Хочу подчеркнуть, что это не вопрос вкуса или личных предпочтений:

    Последняя строчка там все точно объясняет.

    способа (уж незнаю как его назвать правильнее) в том, что нельзя повесить фоновый рисунок с background-position:bottom; если такой рисунок один, то его можно поместить фоном общего контейнера… но что делать, если он не один?
    PS: background-position: url(‘img1.png’), url(‘img2.png’), url(‘img3.png’)
    Мечты, мечты…

    Спасибо, отличная статья.
    Многое разъяснилось.

    Очень. Очень содержательно и читабельно!

    Рету:
    Спасибо. =) Был уверен, что что-то в этом роде и имеет место. Буду знать =)

    Особо ценный комментарий

    Только что вспомнил, что меня терзало, когда я писал, что faux columns неприменимы к нефиксированным колонкам с процентной шириной. Теперь я помню, что есть таки способ, и совершенно нормальный.

    Итак, у нас есть колонки переменной ширины, левая 70% и правая 30%. Требуется положить под них фоновую двухцветную картинку так, чтобы левые 70% всегда закрывались одним цветом, а правые 30% — другим.

    Оказывается, достаточно сделать эту картинку очень длинной. Пусть будет 3000 пикселов. Делим ее на то же самое отношение: 2100 пикселов одним цветом, 900 — другим. А теперь:

    Вот эти 70% — это позиция фоновой картинки по горизонтали. Но работает она просто гениально: берется точка в 70% слева на картинке и совмещается с точкой в 70% слева ширины блока.

    А у нас как раз на картинке по 70% идет граница цветов, а по 70% блока — граница колонок. Вот так и получается, что эти границы всегда совпадают. А лишняя ширина картинки просто вылезает с обеих сторон за пределы блока, ее там не видно.

    P.S. Кстати, если подумать чуть дальше, то становится понятно, что позиционирование фона только так и может работать:
    — если поставить 0, то нулевая точка картинки совмещается с нулевой точкой блока — левое выравнивание
    — если поставить 50%, то середина картинки совмещается с серединой блока
    — если поставить 100%, то самая правая точка картинки (это и есть 100% от левого края) совмещается тоже с правой точкой блока

    Супер. Вы не хотите издаться в виде книжки?м Я Вас умоляю, продолжайте «учебник», а?

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

    Спасибо, очень хорошие уроки — доступным языком :)
    А не моглибы Вы в одном из следующих уроков пояснить разницу между id и class, хотелось бы ещё узнать как «правильно» составлять стили.

    Хочу добавить несколько линков по поводу обхода глючной поддержки float в Internet Explorer.

    Грубо говоря, на отдельно взятой HTML странице должен быть только ОДИН элемент с определенным id, в то время как тот же самый class может быть применен к множеству элементов. Или, другими словами, id уникально идентифицирует конкретный элемент, чтобы можно было потом обратиться к свойствам этого элемента (например через JavaScript) используя его id, а class — это удобный способ применить один и тот же стиль ко многим (не обязательно одинаковым) элементам.

    uncle.f, спасибо за разъяснение :)

    Вау, отлично, просто нет слов, нашел для себя несколько интересных моментов!
    вопрос — сколько уровней вложенности допускается в блоках (div’ах обычно).
    Сейчас «закапываюсь» в 5-6 уровней вложенности, а дальше — 10 допускается, а 20?

    Синтаксически можно, конечно, сколько угодно div’ов. На практике же для раскладки редко когда действительно нужно больше 3 уровней вложенности. И, кстати, это не обязательно дожны быть div’ы.

    Большое количество div’ов — это обычно следствие традиционного HTML’ного подхода к верстке, просто с заменой table -> div. Это исключительно неверно, и буквально через пару статей я напишу об этом подробно.

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

    Недавно возникла проблема, самизнаетекакой браузер наотрез отказался воспринимать overflow: hidden; по прямому назначению.
    Параллельно случайно решил перечитать эту статью учебника и, как оказалось, не зря:

    У решения с overflow есть одна загвоздка, связанная с поведением Некоторого Браузера™. Оно работает только если контейнеру явно назначены ширина или высота. Из-за этого им иногда неудобно пользоваться, когда вам нужны автоматические размеры, а не жесткие.

    И действительно, помогло. Но загвоздка в том, что у этого блока ширина не определена, т.е. по сути она считается как 100% — 2px (однопиксельный бордер).
    Увы, так в css сказать нельзя.
    Как выход вижу только добавление еще одного когтейнера, семантика летит к чертям. Не хочется так.
    Возможно есть какой еще рычаг потайной или педали чтобы включить overflow в чудобраузере?

    Перенес обсуждение в форум.

    по поводу порушенной семантики и необходимости ставидь сайдбар выше контента:
    в силу оптимизационных причин необходимо контент (с h1 и текстом) ставить в самом-самом верху. делаем так:

    ну далее можно и faux columns или что там по вкусу.

    Посмотрите внимательней, я написал, что проблема с порядком следования колонок возникает только в случае, когда ширина одной из колонок не задана. Из-за этого их невозможно двигать margin’ами.

    Кстати, margin’ы в случае двух колонок лишние, тут вполне можно обойтись разными float’ами (left и right). А пример для трех колонок, как раз с margin’ами, можно посмотреть в одной из следующих статей «Пример верстки CSS»

    По поводу нескольких фоновых картинок и цветов.
    Я не проверял, но кажется, что ничего не мешает сделать так:

    И стили типа:
    .bg1

    .bg1 <
    background-image: url(bg2.png);
    background-position: 100% 20px
    >

    Громоздко, но, думаю, действейнно.

    Речь шла о нескольких картинок на одном элементе :-).

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

    Я обязательно напишу в «Учебнике» отдельную статью о том, почему вот это явление под названием «дивная верстка» — кошмар :-).


    Гм,
    можно использовать такой способ:

    Получить JavaScript-ом видимую высоту экрана, и назначить её как height всем колонкам, чтобы они были одного размера. А?

    content,

    отказывается в нём корректно работать. В случае если содержимого больше в «незаfoloat-нутой» колонке — всё нормально, но вот если наоборот — float-колонка беззастенчиво обрезается.

      Может быть вы проясните ситуацию: в вышеозначенном браузере при попытке сделать две колонки — одну float, а другую с margin, у той что с margin со стороны float-колонки появляется какой-то совершенно глупый padding в 4 пиксела. При применении лекарства (Holly Hack) этот padding пропадает, но появляется не менее глупый margin на этот раз уже шириной в 3 пиксела.
      Устраняется это недоразумение двумя css правилами:

    • html #float_left <
      margin-right: -3px;
      >
    • html #right <
      margin-left: [ширина #float_left — 3]
      >
  • Как обьясняется это своеобразное поведение IE? И можно ли это обойти как-то более проще, чем я описал выше?

    У решения с overflow есть одна загвоздка, связанная с поведением Некоторого Браузера™. Оно работает только если контейнеру явно назначены ширина или высота. Из-за этого им иногда неудобно пользоваться, когда вам нужны автоматические размеры, а не жесткие.

    Итак, в итоге, чтобы исправить наш пример с колонками, надо сделать так:

    По моим наблюдениям в Некотором Браузере побочный эффект от ovrflow вообще не проявляется. Ему главное — width: 100%; Поэтому если быть точным, то я бы сказал так:
    width: 100%; — для IE,
    overflow — для всех остальных.

    1. в сафари схлопываетса
      padding-bottom:32767px;
      margin-bottom:-32767px;
    2. float имеет by default width:100%;
      например в

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

    А как реализовать способ

    в опере? Опера совсем не солидарна здесь с Мозиллой и ИЕ.

    Я раньше не знал такое свойство как «clear:», поэтому подвал
    опускал вниз указанием width:ширина по главному контейнеру,
    , так он опускался под сайдбар и контент, но
    возникала проблема того что основной контейнер
    проваливался под все блоки раскладки. «Натянуть» его до низа
    было возможно применяя специальный класс /* Clearfix */ —
    это известный хак, который частоприменим. Как я понимаю,
    смысл его — поставить символ после следования всех блоков
    внутри главного контейнера, тогда контейнер будет вынужден
    растянуться до этого символа и вберет в себя все внутренние
    блоки.

    Вопрос: Знаете ли вы о таком хаке? Если да, то я не совсем
    понимаю расклад — ваш clear гораздо проще и чище чем этот
    хак. Значит либо люди не в курсе про clear, либо я не совсем
    понимаю значение данного хака и применял его однобоко — без
    понимания вопроса.

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

    По поводу дополнительного символа в clearfix. Если подвалу назначить clear, то он опустится вниз под float’ы, но не потянет за сабой фон контейнера, потому что сам в нем не находится. Clearfix использует тот факт, что :after находится как раз внутри контйнера, и поэтому тянет его за собой, когда опускается вниз. А символ этот, насколько я понимаю, нужен, чтобы элемент :after вообще сгенерировался, иначе его просто не будет.

    Я не упомянул его вообще в статье, потому что :after не работает в IE6. А значит в нем раскладка скорее всего будет сильно покорежена, и это не мелкое неудобство, на которое можно закрыть глаза. Вместо него я как раз рекомендую более практичное решение с overflow, которое в IE работает и тоже не требует дополнительных элементов в HTML.

    нужно разложить в 2 колонки, скажем s >

    просто все float’ить не получается ибо ширина main не известна.
    Проверено в Safari, FireFox и Opera (IE под рукой нет, да и шаблон не доделан пока. может в итоге это и не получится. )

    Алексей, хорошо бы, чтобы main ещё занимал 100% — 200px, а в этом случае этого врядли можно добиться :(

    Итак, для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat’им на это место:

    Только что был изучен ещё один способ. Можно вместо левого отступа выставить любой overflow (кроме visible, естественно). А вдобавок к отступу — ещё и растянется на всю доступную ширину, совсем хорошо :)

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

    Супер!
    Актуальная информация понятным и доступным языком.
    Огромное спасибо!

    PVasili: Варианты с подложкой из графики,imho есть кривоватые

    • не подойдут для 3+колоночной вёрстки, в случае если средние колонки по высоте меньше 100%

    Нашел еще один способ заставить растягиваться div до размера float’ов.

    Плюс в том, что не надо указывать overflow: hidden, когда делаем выподающие меню и создаем наш pop-up в контейнер

    Работает в IE, FF. Не проверял в Опере.

    а зачем вообще float?
    чем не нравится, например:
    h1

    Потому что эта статья — про float. В «Учебнике» есть и другие статьи, есть и про абсолютное позиционирование и есть его пример.

    а зачем использовать float там, где можно без него обойтись? имхо.
    это довольно проблемное свойство.

    Я вот долго мучался, не знал как же сделать тянущиеся элементы, потом подсказали ваш блог:) Прочитал, сделал, получилось в FireFox 2, IE7, Opera 9 все так надо но, потом решил тестить поставил в виртуалке ещё одну винду с 6 ИЕ и там увидел старх. во-первых он откуда-то 3 пикселы дорисовал, ну ладно не смертельно хотя очень хотелось бы знать откуда?! Ну и главное там не работает overflow:hidden, почему? сайт sirena.com.ua можете зайти сами на главной єто хорошо видно.

    Довольно трудно понять, какой именно overflow не работает (в принципе-то IE6 его знает). Не могли бы вы обрезать сайт до пример, где была бы видна суть неработы и задать вопрос у меня в форуме: http://softwaremaniacs.org/forum/viewforum.php? >

    Salik
    У меня все работает нормально в 6-ом ослике.

    Выше давали ссылки про overflow.
    Вместо выставления контейнеру
    width: 100%;
    можно делать
    zoom: 1;
    Если интересно почему и как, поищите в msdn свойство hasLayout

    Комментарий относительно колонок, когда одна колонка фиксированной длины, а другая остальная ширина (margin-left: 200px)

    Так вот в эксплоере есть баг, из-за которого я зря прожил 2 часа жизни :)
    Если одному из контейнеров добавить высоту (например height:200px;) то между ними образуется расстояние этак в пикселов 5 — у меня просто в обоих дивах фон, который должен соединяться.

    Так что опасайтесь height если нужно чтобы дивы прилипали друг к другу.

    ЗЫ А гуру могут объяснить почему так height влияет.


    По поводу создания горизонтального меню из списка: по-моему, проще задать
    display: inline; margin-right: 20px;
    В самом списке убрать маркировку, как обычно.

    Ссылка на перевод статьи «Faux columns» испортилась (теперь по этому адресу живёт нечто иное). Вот ссылка на единственный перевод, который удалось найти: http://designformasters.info/posts/fauxcolumns/

    очень интересный сайт, написано все здорово, и проиллюстрировано тоже здорово

    но, есть одно неприятное но.
    когда скроллишь этот сайт в файерфоксе, скроллится рывками, что очень мешает читать.

    как читатель, буду премного благодарен, если автор этот баг пофиксит (если это баг, а не проблемы с моим компом)

    как читатель, буду премного благодарен, если автор этот баг пофиксит (если это баг, а не проблемы с моим компом)

    Вообще это проблемы с ФФ. Он во второй версии не слишком хорошо работает с прозрачными PNG’шками, в альфах третьего уже всё починили.

    Плюс автор работает под линухом, где эта проблема намного меньше видна, чем в винде. По крайней мере на моём компе. :)

    Огромное спасибо за статью. Очень много вопросов выяснил для себя, прочитав ее. Автор все крайне доступно, и интересно изложил. Респект!

    в опере? Опера совсем не солидарна здесь с Мозиллой и ИЕ.

    Да, я тоже с этим столкнулся: при использовании overflow: hidden появляется огромное «белое» пространство под основным содержимым

    . при дальнейшей правке эта пустота может сама собой исчезнуть. мда 8)

    Огромное спасибо, без вас бы не разобрался, особенно с Известным Браузером.

    Мегареспект и уважушища! Только что проваливались флоаты. Думал за бубном идти. Если под известным браузером понимается ИЕ, то как раз с ним опчему-то проблем не было.

    Maniac, читаю тебя не отрываясь :) Зачот! Памятник конный за этот учебник :)

    Если все так круто, то как вы объясните, что на этой странице 163 ошибки в html? Может сначало научимся сайты верстать, а потом других учить будем?

    Не ребят в самом деле тема классная. очень много умного узнал для себя.. но на Вашем cайте вот это:

    конечно похоже на лень наверное!

    В целом сайту респект.

    Этот вариант у меня везде работает, кроме IE8 Beta1. Не исследовали?

    А есть ли возможность задать блоку с заданным clear отступ от флоатов? Или только margin-bottom самим флоатам?
    Неужели clear:both и margin-top:Npx — вещи вообще несовместимые?

    clear тут не самый удачный вариант. Margin clear’нутого бокса будет проваливаться вверх, под float’ы, пока не достигнет границ контейнера, в котором float’ы лежат. Поэтому, вместо clear’а чаще используют overflow: hidden на контейнер float’ов, чтобы они из него не вываливались, он, соответственно, заканчивался после них, и тогда уже margin’ы следующих элементов нормально работают.

    А вот такой пример «из жизни». Надо сделать трехколоночный сайт. Разумеется с шапкой и подвалом. Только вот если использовать float для колонок, то внутри колонок его использовать уже не удасться (точнее, не удасться использовать clear).

    Можно попытаться использовать абсолютное позиционирование для колонок. Да только беда в том, что высота ни одной из колонок заранее не известна, т.е. min-height не прокатит. Можно было бы привлечь JavaScript или вообще вычислять высоту одной из колонок в скрипте, но уж больно это неблагодарное дело. Хоть я и отвык от таблиц, но без них тут, на мой взгял, никуда. Только не надо говорить про display: table — это где-то работает, а где-то нет — сайт то для людей делается, в основном лохов, а не гиков. Есть какие соображения по этому поводу?

    Статья действительно очень качественная и помогла мне в решении многих проблем с созданием вот такого вот макетика (http://pion.ru/zoo/float-layout.html)), который я в будущем возможно придумаю как использовать, но увы как же быть с Оперой, про которую тут уже спрашивали.

    При использовании такой конструкции

    только в опере, а также как утверждают IE8 Beta, действительно появляется немеряно белого пространства от которого не понятно как избавляться.

    Есть ли уже какое-нибудь решение? Без него как то сыровато выходит, на опере сидят многие.

    Можно наверное просто не пользоваться этими «хвостатыми» колонками, все таки хак довольно грязный :-). Всегда есть faux columns. А где не получается, что ж, есть пределы у CSSной раскладки в работе с колонками.

    только в опере, а также как утверждают IE8 Beta, действительно появляется немеряно белого пространства от которого не понятно как избавляться.

    Что самое интересное, в некоторых случаях появляется, в некоторых — нет. Как-то зависит от содержимого колонок, но вычислить, что именно влияет на это, у меня не получилось.

    Очень долго блуждал по сети в поисках.
    и вот ура нашел одной статье больше нужной информации чем в целой книжке на 300 стр.

    Огромное спасибо за учебник.

    Спасибо огромное за учебник!

    Наконец-то становится понятно, как это работает! :) Не могу описать, как становится хорошо, когда после двух дней работы над одной страницей, огромного количества часов в интернете и написания всего одной-двух строчек кода в конце, страница наконец принимает благопристойный вид!

    Огромная просьба — не оставляйте этот труд, продолжайте нас просвещать!

    Спасибо большое за статью.

    У вас вот здесь ошибка закралась:

    похоже на auto, только скроллбар у контейнера есть всегда, даже когда содержимое его не переполняет

    Float-нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера. А вот если в такой бокс поместить другой блок и задать для него height:100%, то float-нутый бокс раздвигается на всю ширину (наблюдается только в IE). Это стандартоное поведение бокса или очередной глюк IE? Как лечить?

    А вот еще засада с IE. При реализации двух колонок с растягиванием только одой колонки

    в IE6 в колонке #content появляется непонятный левый отступ 2-3 пикселя. Причем, на том уровне, где левая колонка заканчивается, отступ также заканчивается. Может кто встречался с такой проблемой. Как устранить?

    Решение вышеуказанной проблемы найдено:

    Таким образом устраняем устраняем непонятные 3px у плавающего элемента

    Оказывается, достаточно сделать эту картинку очень длинной. Пусть будет 3000 пикселов. Делим ее на то же самое отношение: 2100 пикселов одним цветом, 900 — другим. А теперь:
    div <
    background:url(bg.png) 70% 0 repeat-y;
    >>

    Только что обнаружил, что это не работает в IE7 и 8. Картинка у меня 4000 пикселов. Что делать не соображу, сайт рабочий, в подписи. Правило такое:

    body <
    width: 100%;
    font: 85% Verdana,Sans-serif;
    color: #E045CE;
    background: url(img/bg.gif) 75% 0 repeat-y;
    padding: 0;
    margin: 0;
    border: 6px solid #DAB88F;
    vertical-align: middle;
    >
    В других браузерах нормально.

    А кто мешает после content, sidebar и прочих флоатов, непосредственно перед закрывающим тэгом main, поставить пустой элемент со свойством clear:both? Тогда main растягивается по высоте и ничего не вываливается. Работает во всех актуальных версиях Опера, ФаирФокс, ГуглХром, Сафари, а также ИЕ7 и 8.

    Опять-таки, я далеко не случайно «отрезал» на картинках >нижнюю часть блоков :-). Иначе бы они как колонки совсем >не выглядели, потому что, как нетрудно убедиться, если >применить те фрагменты CSS, что я привел, и раскрасить >колонки разными цветами, то их высота оказывается разной. >Она зависит от количества содержимого в этих блоках.

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

    ** #sidebar <
    float:right; width:200px; margin-buttom:0; margin-top:0;
    >

    margin-right:200px; margin-buttom:0; margin-top:0;
    >
    **
    Тогда обе колонки будут растягиваться во всю ширину контейнера. (может я не прав, просто изучение CSS начал именно с этого учебника вчера))

    Огромное спасибо за статью. До этого долго мучился с позиционированием элементов.

    Иван, большое спасибо за статью — Вы действительно собрали все в одном месте о Float.

    Но вот ответа на свой вопрос о применении Float и его отмене в контенте, при использовании Float-колоночной раскладки сайта я к сожалению не нашел.

    Вот тестовая страничка (http://lrimi.ru/simple.html)), где требуется отменить Float для абзаца и заголовка. Если применить Clear:left или Clear:both, то абзац и заголовок «провалятся» ниже нижней границы левой колонки.
    Ведь Clear Float применяется не к последнему элементу со свойством Float, а жаль — как все было бы просто.

    Спасибо за статью.

    Наткнулся в итоге на статью, про флоаты. Не дочитал – так как монументально писано. Ложу себе ссылку на память.

    Может кому поможет)) ещё 1 вариант пофиксить баг IE (а именно 6ая версия). Если у Вас ситуация допустим, что в одном блоке размещается, несколько других блоков с float’ом. Допустим вы делаете фотогаллерею, где в блок галлереи будет вмещаться по 3 картинки вряд, а таких рядов у нас великое множество.

    Вот пример, где образуется сетка 2х2.

    Во всех браузерах будет отображаться всё без отступов и корректно. 2 картинки вместились в ряд, 3ья картинка пошла на следующий, ну итд.

    А вот IE6 будет рисовать отступы между каждым рядом. Нашёл как победить это, чем и делюсь с Вами. Нужно добавить font-size: 0pt; в #box. Получится следующее:

    Буду рад если кому-нибудь это поможет)

    Я начинающий. И лично мне кажеться, что начинающему это не поможет, а знающему уже известно. Если Вы пишите для начинающих, то пишите завершенные примеры, как в хороших книгах. Чтобы не надо было читать весь сайт, чтобы понять 1 фразу. Да и балагурить поменьше, это отвлекает и сжирает время. Не обижайтесь.

    Действительно, просто великолепные статьи пишите. Я в общем достаточно давно верстаю, но ваши статьи пролили свет на кучу моментов, используемых раньше интуитивно. Большое вам за это спасибо. Кстати, как там насчет книжки? ))Еще не дозрела идея до реализации? ))

    Спасибо огромное! Я учусь на курсах, и, как на зло, пропустила супер-важную тему позиционирования в css. C вашей помощью, наконец-то, поняла что к чему. Очень рада такому обстоятельству. Тем более, что все доступно написано. Еще раз спасибо.

    Я не буду здесь останавливаться на механизмах работы правила float, так о нем можно писать целые книги. Подробное объяснение на русском можно почепнуть в статье Ивана Сагалаева «Раскладка в CSS: float».

    Недавно на alist apart была статья CSS Floats 101. Нашел ее руский перевод здесь: Плавающие элементы и CSS. Мне кажется это прекрасное дополнения к вашей статье.

    Спасибо за статью! Очень полезная!

    Интересующимся техническими подробностями, рекомендую замечательную статью Ивана Сагалаева.

    Очень ценная статья! Я как начинающих верстальщик, не раз сталкивался, с подобным чудом и всегда меня выручали друзья, но теперь, я думаю, что смогу осилить эту «пакостную» тему!

    Спасибо огромное, с меня чай с бутиками))

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

    Почему бы просто не использовать огромную высоту колонок вместо этого маргина и паддинга. Overаlow в контейнере и мы видим тот же результат.

    Дело в том, что в CSS, к сожалению, нельзя напрямую сформулировать такую вещь как «вся доступная ширина минус конкретное число».

    Каковы самые большие минусы использования позиции: absolute & top/left over Float & margin + padding, Если сайт фиксированной ширины (970px), с центром?

    Каков самый большой недостаток использования CSS-позиционирования (From Dreamweaver AP Div) для всего, а вместо Float для фиксированной ширины, центрированного веб-сайта

    , если меня не волнует

    • Мобильные пользователи
    • Пользователи небольшого экрана (меньше 1024 px размером экрана)

    Но я забочусь о

    • Пользователь экранного считывателя
    • Все пользователи браузера (включая IE6)

    Если вы не заботитесь о небольшом разрешении, это просто вопрос гибкости: когда вы используете абсолютное позиционирование, вы нарушаете поток. Итак, все должно быть точно размером.

    Для многих элементов или ситуаций (создайте идеальное название изображения. ), это лучший (а иногда и уникальный) выбор. В большинстве случаев «относительный» лучше, потому что он удерживает поток (элемент остается в потоке), но вы можете изменить положение относительно относительно позиционированного родителя (не забудьте указать родителя, даже если вы не даете явного положения; например, просто добавьте позицию: относительная, без верхней/левой. ). И, хороший момент, «position: relative» дать haslayout элементу в IE!

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

    Float — это не идеальное решение, так как вы можете читать во многих блогах: это очень конкретная статья, но это полезно, потому что «встроенный блок» не работает все время. И, конечно же, это также полезно, когда вы действительно хотите, чтобы элементы плавали.

    Не так легко объяснить, когда вы не хорошо говорите по-английски:)

    Илон Маск рекомендует:  Public - Директива Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL