Хочу рассказать про одну полезную технику, которой пользуюсь в последнее время.
Обычно для создания колонок при бестабличной верстке используются плавающие элементы. Но свойство float изначально предназначалось совсем для другого, со всеми вытекающими неудобствами – необходимости применения свойства clear. Например, чтобы родительский блок имел ту же высоту, что и внутренние колонки или чтобы последующий контент вёл себя как подобает, а не выскакивал в ненужных местах между колонками.
Обычно вставляется див нулевой высоты типа div.clear, т.е. семантически лишний код.
Но очистку можно делать и другим способом без использования лишних элементов в коде.

Поможет нам в этом стандартный псевдо-элемент :after. Техника “самоочистки” заключается в том, что этому элементу задается свойство clear.
Допустим, нам надо сделать две колонки в контенте.
Без использования техники “самоочистки” код, вероятно, выглядел бы так:

<div class="cols">
  <div class="col1">Текст1</div>
  <div class="col2">Текст2</div>
  <div class="clear"></div>
</div>

Но возможно сделать так (что, на мой взгляд, намного симпатичнее):

<div class="cols">
  <div class="col1">Текст1</div>
  <div class="col2">Текст2</div>
</div>

CSS-код:

.cols div{
  float: left;
  width: 50%;
}
.cols:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

В IE, естественно, это работать не будет. Но есть способ заставить IE действовать так как нам нужно. В отдельный файл для IE дописываем:

.cols{
  height:1%;
}

Или если лень создавать отдельный файл для IE можно прямо в коде: //height: 1%
Результирующий CSS-код будет выглядеть так:

.cols{
//height: 1%;
}
.cols div{
float: left;
width: 50%;
}
.cols:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Источник: http://habrahabr.ru

Подпишись на RSS! Будь всегда в теме!