Верстка без float'ов

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

Но, как и многие мощные инструменты, float'ы имеют свои изъяны. Для начала, верстка на основе float'ов не такая простая к пониманию, а также float'ы есть источником многих багов (в основном в ИЕ), что делает их не идеальным вариантом в погоне за кроссбраузерностью.

Итак, речь далее пойдет о семантически корректном методе верстки.

Начнем с обычной разметки (основанной на div'ах)

  Header
  Body
          Section 1
      Section 2
      Section 3
    
  
  Footer



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

1. Header
2. Body
       
   1. Section 1
   2. Section 2
   3. Section 3
   
     
3. Footer

Использование CSS стилей

Для «хороших» браузеров, все достаточно прозрачно.

* {margin:0;padding:0;}
#wp {width:55em;margin:0 auto;list-style-type:none;}
#bd {display:table;}
#doc {display:table-row;}
#s1,#s2,#s3 {display:table-cell;}


Стили для IE

В IE LI имеют значение display равным inline-block, поэтому:
1. Для IE Win используем {display: inline; zoom: 1}. «zoom:1» используется для того чтобы елементы имели hasLayout-свойство. (читайте наличие layout или на хабре Изучаем наличие layout)
2. Для IE Mac — {display:inline-block;float:left;}

Так же нам понадобятся еще несколько дополнительных правил:

• vertical-align чтобы контент в LI прижимался к верху, а не к низу
• width для каждого из LI

#s1,#s2,#s3,{display:inline;zoom:1;vertical-align:top;}
#s1 {width:12em;}
#s2 {width:29em;}
#s3 {width:14em;}
/*\*//*/
#s1,#s2,#s3 {display:inline-block;float:left;}
#ft {clear:left;}
/**/


Css-правила выше используют некоторые хаки, а именно:

• IE (IE 7 и IE Mac включительно) не игнорирует правила, в которых запятая предшествует блоку объявлений
• IE5 Mac <a href=«www.stopdesign.com/examples/ie5mac-bpf» title«фильтр»>фильтр

Так как IE 5.1 имеет баги с математическими рассчетами, то нужно уменьшить ширину первого столбца, поэтому используем <a href=«tjkdesign.com/articles/conditional_comments.asp» title«условные комментарии»>условные комментарии с условием «if lt IE 5.5000»




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

Метод достаточно интересный, если отбросить поддержку морально устаревших браузеров, таких как IE5.5 и меньше, то правил станет значительно меньше. Этот метод позволяет просто и без забот решить проблему, когда нужно расстянуть float-блок (скорее всего боковой блок), чтобы он был равен главному по высоте (к примеру, если фон нужно расстянуть).

Ниже привожу ссылки с примерами разных разметок:
Фиксированная в пикселях: 210, 400, 190
<a href=«tjkdesign.com/articles/css-layout/?6» title"">Резиновая в %: 20, 60, 20 с мин/макс шириной (800px/1200px)
<a href=«tjkdesign.com/articles/css-layout/?7» title"">Резиновая в %: 20, 60, 20