полностью согласен на счет px, но здесь не прокатят относительные величины для высоты футера, т.к. отрицательный отступ сверху должен быть равен высоте футера, может в нормальных браузерах это и прокатет (что тоже не факт) но осел точно умрет на месте ;)
Если взглянете на мои верстки последнего года не найдете ни одной сделаной по-другому =)
на самом деле
position: relative;
clear:both;
совершенно излишни ;) я никогда так не писал, работает во всех браузерах отлично, а самое главное исходя из спецификаций оно так и должно работать, так что это метод на много-много лет вперед
и ещё чуть-чуть:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
помоему код не достаточно прочитать и сразу все становится понятно
я предпочитаю писать
html, body {height: 100%;}
#wrap {_height: 100%; min-height: 100%;}
эффект точно такой же, только несмотря на кашунственный хак для ie6 код как-то сразу становится понятнее и последовательнее
+1 но для полной гарантии имеет смысл добавить ещё пару популярных полей, вроде «name», «surname», «age»…
и включить проверку ПО ВРЕМЕНИ:
боты любят запоминать состояние hidden'ов чтобы форма точно дошла до получателя, если мы передадим в hidden текущую дату и время, а потом при отправки письма сравнивать это значение с текущим временем. Ведь только бот сможет отправить форму меньше чем за 3 секунды и только бот сможет «отправлять» форму более 12 часов =)
честно говоря, не знаю, да и по-большому счету не считаю такое построение правильным, это преведет к очередному мусорнику в таблицах стилей, ведь браузер в любом случае сначала определяет стандартные стили для всех определенных в нем тегов, переопределяя их мы во-первых создаем ещё один мусорник (ведь для каждого нововведенного тега необходимо указать все стандартные свойства типа overflow), а во-вторых браузер будет напрасно работать инциализируя сначала "нормальные теги", потом нововведенные.
Я считаю, что правильнее всего по-максимум пользоваться тем, что тебе дали разработчики браузера, все необходимы виды тегов уже существуют и подбирая для каждого конкретного случая наиболее подходящий мы как раз и добиваемся симантичности, понятности и малых размеров кода.
Я пользуюсь этой техникой и честно говоря прижимать к низу так очень не удобно, хотя и вполне реально, вообще-то я себе и не представляю плавающую модель без отрицательных полей.
А мне кажется, что эта схема не имеет права на жизнь.
Как-то 2 года таму назад, когда я искал первую работу, одно крупной Ростовское интернет-агентство предложило выполнить мне тестовое задание таблицами и дивами, тогда мне только исполнилось 18 и о верстке дивами я разве что слышал, начал искать материалы, ничего не нашел...потом мне самому пришла в голову мысль сделать именно так, как в примере...это первый и последний раз когда я так делал, ибо это просто замусоревание css-кода.
О тактико-технических характеристиках данной схемы:
Размер html-кода - как при табличной верстке
Размер css-кода - огромный
Семантика html-кода - как при табличной (у автора видимо неправильное понимание слова "семантика")
Сематика css-кода - отсутствует
Понятность кода - отсутствует
По сути является табличной версткой, только мы ещё берем на себя часть работы браузера, создавая свою таблицу.
Предлагаю ещё 2 метода:
1) давай те сделаем новую БОЛЕЕ СЕМАНТИЧНУЮ плавающую модель
<table><tr><td>1 блок</td><td>2 блок</td></tr></table>
css:
table {display: block;}
tr {display: block;}
td {display: block; float: left; width: 50%;}
2) Или вот ещё классный вариант избежать путаницы с class и id, давайте их просто не использовать XHTML позволяет нам создовать свои теги, давайте воспользуемся этими возможностями и напишем:
<header>
<left>Блок 1</left>
<left>Блок 2</left>
</header>
css:
header {display: block; width: 100%;}
left {display: block; float: left; width: 50%;}
Да, конечно пострадает валидность, зато очень короткий и действительно семантичный код.
З.Ы. а вообще каждый сам для себя решает, как ему делать, главное результат: если Ваша верстка будет легко встраиваться в CMS, будет всем понятна и будет работать в браузерах через 20 лет, то наплюйте на все советы :)
на самом деле
position: relative;
clear:both;
совершенно излишни ;) я никогда так не писал, работает во всех браузерах отлично, а самое главное исходя из спецификаций оно так и должно работать, так что это метод на много-много лет вперед
и ещё чуть-чуть:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
помоему код не достаточно прочитать и сразу все становится понятно
я предпочитаю писать
html, body {height: 100%;}
#wrap {_height: 100%; min-height: 100%;}
эффект точно такой же, только несмотря на кашунственный хак для ie6 код как-то сразу становится понятнее и последовательнее
и включить проверку ПО ВРЕМЕНИ:
боты любят запоминать состояние hidden'ов чтобы форма точно дошла до получателя, если мы передадим в hidden текущую дату и время, а потом при отправки письма сравнивать это значение с текущим временем. Ведь только бот сможет отправить форму меньше чем за 3 секунды и только бот сможет «отправлять» форму более 12 часов =)
Я считаю, что правильнее всего по-максимум пользоваться тем, что тебе дали разработчики браузера, все необходимы виды тегов уже существуют и подбирая для каждого конкретного случая наиболее подходящий мы как раз и добиваемся симантичности, понятности и малых размеров кода.
Как-то 2 года таму назад, когда я искал первую работу, одно крупной Ростовское интернет-агентство предложило выполнить мне тестовое задание таблицами и дивами, тогда мне только исполнилось 18 и о верстке дивами я разве что слышал, начал искать материалы, ничего не нашел...потом мне самому пришла в голову мысль сделать именно так, как в примере...это первый и последний раз когда я так делал, ибо это просто замусоревание css-кода.
О тактико-технических характеристиках данной схемы:
Размер html-кода - как при табличной верстке
Размер css-кода - огромный
Семантика html-кода - как при табличной (у автора видимо неправильное понимание слова "семантика")
Сематика css-кода - отсутствует
Понятность кода - отсутствует
По сути является табличной версткой, только мы ещё берем на себя часть работы браузера, создавая свою таблицу.
Предлагаю ещё 2 метода:
1) давай те сделаем новую БОЛЕЕ СЕМАНТИЧНУЮ плавающую модель
<table><tr><td>1 блок</td><td>2 блок</td></tr></table>
css:
table {display: block;}
tr {display: block;}
td {display: block; float: left; width: 50%;}
2) Или вот ещё классный вариант избежать путаницы с class и id, давайте их просто не использовать XHTML позволяет нам создовать свои теги, давайте воспользуемся этими возможностями и напишем:
<header>
<left>Блок 1</left>
<left>Блок 2</left>
</header>
css:
header {display: block; width: 100%;}
left {display: block; float: left; width: 50%;}
Да, конечно пострадает валидность, зато очень короткий и действительно семантичный код.
З.Ы. а вообще каждый сам для себя решает, как ему делать, главное результат: если Ваша верстка будет легко встраиваться в CMS, будет всем понятна и будет работать в браузерах через 20 лет, то наплюйте на все советы :)