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

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

Подключения стилей

Ни для кого не секрет информация о существовании тега link которые позволяет подключать внешние таблицы стилей. Но вот об атрибуте media многие забывают. Этот атрибут позволяет указать браузеру для чего используется таблица стилей и может получать значения screen, print, aural, handheld, projection, tv. Таким образом, можно задать отдельные стили для оформления информации для экарана монитора или для вывода на печать. К сожалению сейчас можно говорить об адекватной поддержке только двух параметров screen и print.

Капитель в текстах

В типографике кроме прописных и строчных букв есть еще один тип начертания символов – Капитель. Капитель внешне похож на уменьшенный вариант прописных букв, но на самом деле, это совсем другое начертание букв. В ряде книг капитель рекомендуют применять для набора имён, некоторых названий и аббревиатур и шрифтовых выделений в тексте. Заголовок этого параграфа набран капителием. Для задания капители в верстке есть отдельное свойство каскадных таблиц – font-variant:small-caps;

Некоторые псевдоклассы

Кроме всем известного псевдо класса :hover(IE6 без дополнительных мер поддерживает этот псевдо класс только для ссылок), который задает стиль для объекта над которым находится курсор, и :link,: active, :visited, есть еще ряд других полезных псевдо классов. К ним относится псевдокласс :focus (выделяет активный элемент, например поле в которым находиться курсор, IE7 и ниже не поддерживают ), :first-child (стилевое оформления для первого дочернего элемента), :first-letter (стилевое оформления для первой буквы элемента), first-line(стилевое оформления для первой строки элемента), :after(псевдокласс, который используется для вывода желаемого контента после элемента IE7 и ниже не поддерживают), :before(псевдокласс, который используется для вывода желаемого контента до элемента IE7 и ниже не поддерживают).

Оформления пробелов и запрет переноса

В html 3 для того чтоб запретить переносить строку если она не помещается в контейнер использовался тег nobr, в html 3.2 и выше этот тег считается устаревшим, но его функцию заменяет параметр CSS white-space, который может принимать такие значения: nowrap (переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега br переносит текст на новую строку), pre (текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки), pre-wrap (сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку, не работает в IE6, для поддержки нужно дописать параметр word-wrap: break-word; который можно вынести в отдельный файл стилей для IE чтоб сохранить валидность).

Выравнивание текстов возле элементов формы

Если в одной строке помещать поле ввода, или другой элемент формы вместе с текстом, который указывает назначение этого поля, элементы формы будут выровнены относительно базовой линии строки, причем в разных браузерах будут визуальные отличия в расположении. Для того чтоб изменить расположения элементов формы, скажем выровнять по вертикали, нужно воспользоваться параметром vertical-align задав ему одно из допустимых значений: top, middle, bottom, baseline, также допускается значение заданное в процентах.

Метод «Раздвижных дверей»( Sliding Doors) придумал Douglas Bowman и был опубликован на A List Apart 20 октября 2003 года.

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

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

<ul>
   <li class="”menu”"><a>Статьи</a></li>
</ul>

.menu {
	display:block;
	float:left;
	height:39px;
	margin-right:10px;
	background:url(rightdoor.png) no-repeat top right;
	}
	.menu a {
	display:block;
	height:39px;
	color:#fff;
	text-decoration:none;
	font:11px Tahoma;
	text-transform:uppercase;
	line-height:33px;
	padding:0 10px;
	background:url(leftdoor.png) no-repeat top left;
	}

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

Есть еще одна вариация этого метода. Она состоит в абсолютном позиционировании. То есть родительскому элементу, который содержит контент, присваивается относительное позиционирование (position:relative) и в нем абсолютно, по углам, позиционируются боковые элементы.

Пример раздвижных дверей

Метод FIR (Fahrner Image Replacement)

Этот метод, придуманный Тоддом Фарнером, является довольно простым и оригинальным. Этот метод является наиболее популярным. Концепция метода состоит в том, что текст внутри блока берется в оболочку, которой присваивается display:none;

<h1>
	<span>Метод замены текста изображением  FIR</span>
</h1>

h1 {
width:150px;
height:150px;
background:url(images.gif) no-repeat;
}

h1 span {
display:none;
}

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

Метод Phark

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

<h1>
	Метод замены текста изображением  Phark
</h1>

h1 {
width:150px;
height:150px;
text-indent:-5000px;
background:url(images.gif) no-repeat;
}

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

Метод замены текста картинкой MIR

Метод похожий на Phark, только имеет чуть другу структуру.

<h1>
	Метод замены текста изображением  MIR
</h1>

h1 {
letter-spacing :-1000em;
width:200px;
height:80px;
background:url(images.gif) no-repeat;
}

Метод Leahy/Langridge.

Метод состоит в «Выпихивании» текста верхним внутренним отступом за грани блока.

<h1>
	Метод замены текста изображением  Leahy/Langridge
</h1>

h1{
padding: 80px 0 0 0;
overflow: hidden;
Background:url(images.gif) no-repeat;
height: 0px !important;
}

Метод Гилдера-Левина (Pixy)

Этот трюк замены текста картинкой, созданный Томом Гилдером и Александром Левиым, возможно, самый удобный метод. Он позволяет отобрать текст под картинкой с отключенной графики. Единственный его недостаток в том, что добавляется несемантические элементы. Суть метода состоит в том что в блоке фиксированных размеров, в котором находится текст помещается конструкция которая имеет абсолютное позиционирование и фон, таким образом перекрывает текст.

<h1>
	Метод замены текста изображением  Pixy<span></span>
</h1>

h1 {
position:relative;
width:150px;
height:150px;
text-indent:-5000px;
}
h2 span {
position:absolute;
width:100%;
height:100%;
background:url(images.gif) no-repeat;
}

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

cel-spacing задает отступ между самими ячейками таблицы, то есть расстояние от края одной ячейки до края другой ячейки. cellspacing задает отступ внутри ячейки, то есть от края ячейки до ее содержимого. Зная это легко подобрать эквиваленты в CSS. Таким образом, вместо того, чтоб задавать:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td>Содержимое ячейки</td>
  </tr>
</table>

Нужно прописать стиль таблице:

#tableId {
   border:0;
   padding:0;
   border-collapse:collapse;
}
#tableId td {
   padding:0;
}

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

Нюансом также является то, что параметр Cellspacing задает отступы между ячейками, то есть если задать ячейке border и использовать этот параметр, то между ними появится отступ равный величине этого параметра. Для того что добиться этого эффекта необходимо к таблице (НЕ ячейке) применить css параметр border-spacing:10px;, который к сожалению не кроссбраузерный, как обычно подвел Internet Explorer.

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

Основной идей SGML было создать язык для разметки документов который не был бы привязан к определенной апаратнно-программной платформе. И можно было б обеспечить максимальную перенноситьмость с одной платформы на другую с учетом появления новых платформ без изменения структуры и отображения. Данную идею реализовала команда из компании IBM под руководством Чарльза Гольдфарба. Создатели решили отделить структуру документа от его оформления.

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

Разработчики системы справедливо посчитали, что всякий документ может быть надежно обработан лишь в том случае, если он соответствует некоему единому стандарту. Все прочие документы предполагалось отвергать. Таким образом, потребовалось четко определить допустимую структуру документов того или иного типа. Для этой цели был задействован механизм определений типов документов (DTD – Document Type Definition). DTD, как и лист стилей, представляет собой файл, внешний по отношению к соответствующему документу.

Разделение всего документа на структуры, стили и стандарты формирование давало высокую гибкость, так как можно было редактировать стили и стандарты без изменения структуры документа.

Язык, соответствующий всем вышеозначенным концепциям и получивший название GML (Generalized Markup Language), был создан в 1969 г.В 1986г. ISO приняла язык в качестве международного стандарта и к названию добавилась буква «S».

Сам по себе язык SGML был мало востребован пока сообществу ученных по всему миру не понадобился инструмент способный быстро и легко передавать информацию. В 1991 была разработана система Gopher. Но она не поддерживала графику и гепертекстовые ссылки. Именно тогда на арену вышел Европейский институт физжики элементарных частц (CERN) в лице Тима Бернерса-Ли с проектом «Всемирная паутина».

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

В сентябре 1993 года возглавляемая Марком Андрисеном группа программистов Национального центра суперкомпьютерных приложений выпустила первый графический браузер Mosaic. Программа начала распространятся со скоростью вируса. За первый год было установлено около двух миллионов копий программа. Программа поддерживала мышиный интерфейс и отображение картинок. Все это распространялось абсолютно бесплатно и помещалось на одну дискету.

Тем временем Тим Бернерс-Ли не почивал на лаврах, а продолжал развитие сети. В 1994 была создана организация которая была призвана стандартизировать гипертекстовую разметку. Организация была названа World Wide Web Consortium (w3c.org) и началась работа над создание спецификации для HTML 2.0. Начиная с вереси 3.0 была реализована поддержка СSS которая была создана для разделения элементов отвечающих за отображение и структуру документа.

В начале 1994 года группа разработчиков браузера Mosaic покинула NCSA и совместно с Джеймсом Кларком из Silicon Graphics основала корпорацию Netscape Communications. Через полгода состоялся дебют – вышла первая версия коммерческого браузера Netscape для трех основных платформ. Менеджеры компании прекрасно понимали, что горизонты совсем недолго останутся такими безоблачными, и постарались подстелить соломки где только возможно. Чтобы отхватить как можно больший кусок потенциальной аудитории, привлечь максимальное количество новых пользователей, Netscape вводила в HTML все новые и новые усовершенствования, поддерживавшиеся, естественно, только одноименным браузером. Практически все новые теги были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования.

Выпущенная летом 1996г. версия Internet Explorer 3.0, поддерживавшая практически все расширения Netscape и обладавшая симпатичным и дружественным интерфейсом, очень быстро утвердилась в качестве «второго главного браузера».

Четверные версии обохи браузеров вышли практически одновременно и не отличались друг от друга особой скоростью работы или иными параметрами. Но если Netscape нужно было покупать то Internet Explorer начал поставляться бесплатно в операционной системе Windows и стал фактически стандартом отрасли.

История в датах:

• 1993, 14 марта – выпуск Mosaic первого браузера с графическим интерфейсом.
• 1994 – создан консорциум W3C
• 1994, 13 октября – Marc Andreessen анонсировал Mozilla который потом стал Netscape
• 1995, 22 сентября – HTML 2,0 одобренный как стандарт
• 1995 - Создание CSS
• 1995 - Появление коммерческой версии браузера Netscap
• 1995, август – выпуск Internet Explorer 1.0.
• 1995, 30 августа – создание Opera Software
• 1996 – W3C приняла CSS 1.0 как стандарт
• 1996 – Выпуск Internet Explorer 2.0
• 1996, 14 января – HTML 3,2 одобренный как стандарт
• 1997, 18 декабря – HTML 4,0 одобренный как стандарт
• 1998 – Выпуск Opera 3.5
• 1999, 24 декабря – HTML 4,01 одобренный как стандарт
• 1999 – Принята спецификация на CSS 2.0
• 2000, 26 января – XHTML 1,0 одобренный как стандарт
• 2003, 7 января – Публичная бета-версия Safari
• 2004, 9 ноября – Публичный релиз Mozilla
• 2007, 16 февраля – XHTML 1,1 одобренный как стандарт

График развития:

>

Список источников материла:
w3.org
wikipedia.org
wmast.com.ua
skydesign.ru

В чем состоит основная разница между этими элементам? Кардинальным различием между ними является то, что строчные элементы (inline), по определению, не имеют верхнего и нижнего отступа. Это основано на том, что в общем потоке строчные элементы (inline) идут друг за другом, то есть в одной строке и на другую переходят только когда доходят до конца строки, или когда что-то принудительно заставляет перейти на новую строку. Блочные элементы (block), в отличие от строчных элементов, в общем потоке располагаются один под другим. То есть, строчным элементам нельзя задать margin-top, margin-bottom, padding-top, padding-bottom.

Благодаря этой характеристике есть подводные камни, они состоят в том, что согласно спецификации HTML 4.0, есть ряд элементов, которые относятся к строчным элементам (ниже приведен список строчных и блочных элементов), но которым можно задавать вертикальные отступы. К таким относится элемент img, input, textarea, select.

В этом есть доля разумного, так благодаря тому, что тег img относиться к строчным элементам, ему можно задавать обтекание изображения текстом. Но с другой стороны это порой делает и «медвежью услугу». Так, например многие сталкивались с тем, что если тег img взять в ссылку это приведет к тому, что вокруг тега img появляется рамка цвета, который присвоен ссылке. Убрать ее можно присвоив стилевое свойство border:0.

Другой палкой с двумя концами, является ситуация, когда в строке один за другим идет текстовый элемент и элемент формы, такой как поле ввода, или кнопка, тогда бывает что текстовый элемент расположен не строго посредине от элемента формы, а как бы снизу от него. Эта проблема решается путем присвоения числового значения вертикальному внутреннему отступу(padding-top,padding-bottom) которое и скомпенсирует неровность по вертикали. Для наглядности ниже приводиться список элементов, которые относятся к строчным элементам, и которые к блочным.

К строчным(inline) элементам относятся:

<a href="http://zodios.net">xxx</a>
<br />
<cite>xxx</cite>
<code>xxx</code>
<em>xxx</em>
<img />
<input />
<label>xxx</label>
<select></select>
<span>xxx</span>
<strong>xxx</strong>
<sub>xxx</sub>
<sup>xxx</sup>
<textarea>xxx</textarea>

К блочным block-leve элементам относятся:

<div>xxx</div>
<dl>xxx</dl>
<form>xxx</form>
<h1>xxx</h1>
<h2>xxx</h2>
<h3>xxx</h3>
<h4>xxx</h4>
<h5>xxx</h5>
<h6>xxx</h6>
<hr />
<noscript>xxx</noscript>
<ol>xxx</ol>
<p>xxx</p>
<pre>xxx</pre>
<table>xxx</table>
<ul>xxx</ul>

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

Вариант 1 (align=”center”)

Суть метода в том, что родительскому блоку (тому, в котором нужно выровнять блок по центру) присваивается атрибут align=”center”. Этот атрибут указывает на то, что все содержимое блока должно быть выровнено по центру. Результат метода удовлетворяет ожидания. Недостатком является то что все содержимое всех внутренних блоков также будет выровнено по центру, тоесть прийдеться внутренним элементам переопределять выравнивание. Другим недостатком является то, что атрибут align недопустим при строгой(Strict) разметке (подробней о типах разметки можно прочитать в заметке «Сага о doctype») что приведет к не прохождению валидации.

Вариант 2 (margin: 0 auto;)

Этот метод метода выравнивания div по центру является более эффективным, чем предыдущий. Метод основан на том, что блоку, который нужно выровнять по центру применяется css-свойство margin:0 auto;. Метод основан на сокращенно представлении свойства (подробней читай в заметке «Сокращения при написании CSS»). Таким образом, если необходимо будет еще добавить только отступ сверху необходимо изменить на margin:10px auto 0; или на margin:10px auto; если отступ нужен сверху и снизу.

Вариант 3 (позиционирование и отрицательный отступ)

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

.example3 {
    position:relative;
    left:50%;
    margin-left:-100px;
    width:200px;
    background:#FF6666;
    border:1px solid #FF0000;
}

Вариант 4 (Процентное соотношение)

Если блок, который нужно разместить по центру, имеет ширину в процентах можно воспользоваться этим легким способом выравнивания блока по центру. Метод заключается в том, что блоку применяются боковые отступы равные половине ширины, оставшиеся от 100% после отнятии ширины блока. Скажем, если есть блок шириной 40%, то боковые отступы нужно сделать по 30% и тогда блок будет сцентрированный.

Резюме

Выбор способа выравнивания зависит от контекста решения проблемы и предпочтения верстальщика. Все представленные методы полностью кроссбраузерны.

Реализация методов

Для того чтоб иметь возможность просмотреть страницу на одном компьютере в разных версиях браузера Internet Explorer необходимо установить IETester или Multiple IE о которых рассказывается в заметке «Джентльменский набор верстальщика«

Синтаксис условных комментариев:

<!--[if  "условие"]> HTML <![endif]-->

Условие это логическое выражение, которое формируется при помощи специальных управляющих переменных.

Примеры условных комментариев:

<!--[if  IE]>
       <h1>Этот текст выведется во всех браузерах </h1>
<![endif]-->
<!--[if  IE 6]>
       <h1>Этот текст выведется  только в IE6 </h1>
<![endif]-->
<!--[if gt IE 5]>
       <h1>
       Этот текст выведется браузерах версии высшее 5
      </h1>
<![endif]-->

Постфактум

Условные комментарии также могут быть записаны вот таким образом:

<![if "условие"]> HTML <![endif]>

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

<!--[if IE]><![if !IE]><![endif]-->
    <h1>Этот текст выведется любым браузером кроме IE</h1>
<!--[if IE]><![endif]><![endif]-->

Реализация условных комментариев

Код общей разметки:

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">CONTENT</div>
</div>
<div id="footer">FOOTER</div>
 

Вариант 1(Абсолютное позиционирование)

Суть этого метода прижатия блока состоит в том, что footer позиционируется относительно низа окна браузера. Это делается путем растягивания <body> на высоту всего окна и позиционирования относительно нижнего края блока footer. В блоке content задается свойство padding-bottom равный высоте блока footer , чтоб содержимое блока content не залазило под блок footer при его увеличении.

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#header {
    height: 30px;
    width: 100%;
    background:yellow;
}
#content {
    padding-bottom: 40px;
}
#footer {
    height: 40px;
    width: 100%;
    position: absolute;
    left:0;
    bottom: 0;
    background:green;
}

Особенность этого способа прибивания блока к низу окна, состоит в том что блок wrapper здесь и не нужен, но чтобы сохранить разметку общей для всех методов он присутствует в этом примере. Недостатком этого метода является то, что блок content не растянут на всю высоту окна, таким образом, данный метод не подходит для реализации резинового колоночного дизайна. О том зачем нужна конструкция «min-height: 100%;height: auto !important;height: 100%;» рассказывается в статье «Особенности свойства height«
Реализация варианта 1

Вариант2 (footer с отрицательным отступом)

В этом варианте блок wrapper растягивается на все окно браузера, после этого под ним размещается блок footer с отрицательным верхним отступом равным высоте блока footer. Таким образом, блок footer залазит на блок wrapper снизу. После этого, блоку content присваивается отступ снизу, чтоб блок footer не перекрывал содержимого блока content при увеличении последнего до появления полос прокрутки.

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#wrapper {
  position:relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}
#content {
  padding-bottom:40px;
}
#footer {
  position: relative;
  margin-top: -40px;
  height: 40px;
  background:green;
}
#header {
  height: 30px;
  width: 100%;
  background:yellow;
}

Реализация варианта 2

Вариант 3 (Отрицательный отступ сверху)

Метод похожий на предыдущий с той разницей, что блок wrapper растягивается на 100%, под ним размещается блок footer и блок wrapper оттягивается верх путем установления верхнего отрицательного отступа равного высоте блоа footer. Но нужно не забыть установить блоку header padding-top равный высоте блока footer иначе первое содержимое блока content уйдет за границы экрана. Почему padding, а не margin? Это связано с нюансом блочной модели. Если есть какой-то блок, а в нем находится другой блок с заданным свойством margin-top, то отступ выйдет за грани родительского блока. Данную проблему можно решить путем установки padding-top:1px; тогда верхний отступ будет идти от верхнего края родительского блока. Но если установить родительскому блоку padding-top:1px; его высота будет больше чем 100% и появятся ненужные полосы прокрутки.

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#wrapper {
  position:relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-top:-40px;
}
#footer {
  position: relative;
  height: 40px;
  background:green;
}
#header {
  height: 30px;
  width: 100%;
  padding-top:40px;
  background:yellow;
}

В этом варианте, как и в первом, блок content не является обязательным.
Реализация варианта 3

Вариант 4 (Процентное соотношение)

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

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#wrapper {
  position:relative;
  min-height: 92%;
  height: auto !important;
  height: 92%;

}
#footer {
  position: relative;
  height: 8%;
  background:green;
}
#header {
  height: 30px;
  width: 100%;
  background:yellow;
}

Реализация варианта 4

Как же быть когда нам нужно отверстать колоночный макет в блочной моделе. Это выполняется с использованием метода «фальш колонки». Этот метод основывается на том, что родительскому элементу, который содержит в себе все колонки, присваивается фон в виде горизонтальной картинки нужной ширины и высотой в один пиксель, в котором по краях находится необходимые цвета. Таким образом ,этот фон создает иллюзию колонок. При увеличении одной колонки она растягивает весь родительский элемент и создается иллюзия, что вторая колонка пропорционально увеличивается. Вот пример этого метода ФАЛЬШ КОЛОНКА 1. Сами блоки с текстом взяты в красную рамку, чтоб можно было увидеть суть метода.

Но если у нас резиновый двух колоночный макет нужно поступить таким же образом, но немного модифицировав его. Теперь нам нужно две картинки фона, каждая шириной в ширину колонки, или одна, если колонки одинаковой ширины. Теперь все наше содержимое берется в два оберточных блока в одном указан фоном рисунок шириной равной ширине первой колонки, который буте повторятся только по вертикали и только слева, а во второй другой фон, который повторяется только по вертикали и только справа. Вот пример второй фальш колонки ФАЛЬШ КОЛОНКА 2.