ДиасПро - Вёрстка на div'ах. Как обойтись без 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 фильтр используется, чтобы только IE Mac видел эти правила Так как IE 5.1 имеет баги с математическими рассчетами, то нужно уменьшить ширину первого столбца, поэтому используем условные комментарии с условием "if lt IE 5.5000" По сути на этом все... Далее в статье автор рассказывает как добавить границы, а также указывает на разницу в правилах для фиксированной и резиновой верстки. Метод достаточно интересный, если отбросить поддержку морально устаревших браузеров, таких как IE5.5 и меньше, то правил станет значительно меньше. Этот метод позволяет просто и без забот решить проблему, когда нужно расстянуть float-блок (скорее всего боковой блок), чтобы он был равен главному по высоте (к примеру, если фон нужно расстянуть).
    Разместил: Maggot   Дата: 2008-11-03 21:13

    ДиасПро - Высокоскоростной домашний интернет