Надежда умирает последней, 
даже если надежда, уже умерла…

Как не печально, но полноценной альтернативы верстке с помощью float нет и видимо не предвидится.

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

Результаты экспериментов, показывают, что ни display:table, ни display:inline-block/inline для настоящей кроссбраузерной верстки не годятся

Кто не мечтал о такой конструкции?

 <div id="middle">
  <div class="content">Content</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
 </div>

И чтобы поведение нашей страницы было таким:

Естественно, о таблицах нет и речи. Строго по html-коду приведенному выше.

Согласитесь, приятно получить такую вещицу без всяких извращений. И область контента впереди, фон у колонок разный, сюда же можно присовокупить, возможность вместо фоновой заливки графику пристроить с размножением по вертикали/горизонтали, border у каждой колонки свой, в общем, красиво смотрится.

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

Утопия скажете вы и будете не правы.

Это великолепие можно сделать по разному.

Вариант номер один - с использованием JavaScript. Рассматривать не будем, хотя интересен сам по себе и снимает практически все проблемы с лишним кодом, но он выбивается из тематики блога, посвященной практике html and css.

Вот ссылка, где все это можно посмотреть.

Вариант номер два - display:table плюс float. Тоже не лучшее решение. Мало того, что приходится писать чуть ли не двойные стили собственно для разметки. Но и необходимость в дополнительных контейнерах. Цель, которых именно борьба с табличным поведением – любой блок, графика больше заданной ширины распирает колонки макета, что никак не украшает его.

Также появление индивидуальных стилевых правил при попытке придать макету полную визуальную гармонию в разных браузерах. Причем для создания эмуляции равной высоты колонок для IE6(7) задействован height:expression, что, безусловно, тормозит жутко и ряд прочих "радостей".

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

Третий вариант, чисто на float, гораздо проще, выполнен на основе:

margin-bottom:-32767px;padding-bottom:32767px;

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

Единственная сложность это привязка нижнего border-а, присущая данной технике создания web-страницы. Если просто его прописать любой центральной колонке, он будет не видимым. Здесь без дополнительных контейнеров не обойтись и это препятствует созданию резиновой области контента, так, как применено абсолютное позиционирование со всеми вытекающими :(

Не привожу html-код и стили, все достаточно прозрачно и на тестовых страницах, взглянув на их нутро, вы поймете, о чем идет речь.

К сожалению, проблема с наличием нижнего border-а, а без него картина была бы не полной, еще раз подтверждает, что для подобного рода изысков, наши возможности, при такой компоновке web-страницы, на сегодняшний день сильно ограничены.

Еще один вариант, но без использования:

margin-bottom:-32767px;padding-bottom:32767px;

Будет предложен в одной из следующих публикаций.

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

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

Гремучая смесь float, position:relative/absolute, поможет справиться и с этим.

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

Совсем коротенька заметка. Был анонс вот, и сделаем доброе дело. Будет представлено три варианта. Речь пойдет о макетах сделанных с использованием относительного позиционирования, float и border-а.

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

О проблемах уже говорил, повторяться не буду.

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

Примеры, как и обещано, имеют сто процентную высоту с включением header и footer, одинаковую высоту колонок, резиновую область контента - все браузеры, кроме IE6.

В качестве еще одного анонса:

Нет, это не таблицы. Настоящая, реально работающая web-страница в уменьшенном виде. Скриншоты отражают ее поведение.

Каждый контейнер имеет свою фоновую заливку, можно и графику размножить, свой индивидуальный border. Понятное дело - колонки одинаковой высоты. Про сто процентную высоту с header и footer тоже разговора нет. Расположение колонок, на любой вкус.

Только не задавайте вопрос, а зачем?

В личной переписке, как раз такую разметку и просят чаще всего.

В качестве вступительного экзамена верстальщику при приеме на работу.

Проиллюстрировал работу макета во всех популярных браузерах и вперед.

Конкурс, что ли устроить?

Ну, кто смелый?

html-код, центральная часть:

<body>
<div id="middle">
  <div class="content">Content </div>
  <div class="left">Left </div>
  <div class="right">Right </div>
</div>
</body>

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

В данном случае, речь пойдет о горизонтальном меню.

Хрестоматийный пример, как html-кода, так и стилей.

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

html и css

<ul id="menu">
  <li><a href="#">Home<b></b><u></u></a></li>
  .
  .
  .
  <li><a href="#">Login<b></b><u></u>/a></li>
</ul>

#menu {
  background-color:#fff;
  list-style:none;
  text-align:center;
  margin:0;
  padding:0;
}
#menu li {float:left;padding:0;margin:0;}
#menu a {
  background-color:#e6eaff;
  border-bottom:2px solid blue;
  color:blue;
  display:block;
  font:bold 12px arial;
  margin:0 1px;
  padding:5px 15px;
  position:relative;
  text-decoration:none;
}
#menu a:hover {
  background-color:#000;
  border-bottom:2px solid red;
  color:#fff;
}
#menu a b,
#menu a u {
  border-top:5px solid #fff;
  position:absolute;top:0;
  overflow:hidden;height:0;
}
#menu a b {
  border-right:5px solid #e6eaff;
  left:0;_left:-15px;
}
#menu a u {border-left:5px solid #e6eaff;right:0;}
#menu a:hover b {
  border-right:5px solid #000;
  border-top:5px solid #fff;
}
#menu a:hover u {
  border-left:5px solid #000;
  border-top:5px solid #fff;
}

Что может получиться, если обнулять те или иные border-ы посмотрите сами.

Дефолт:

Обнулен левый border:

Обнулен правый border:

Для усмирения IE6, в секции #menu a b, выделено цветом, указанное значение должно соответствовать величине горизонтального padding-а для #menu a. Это решает проблему размеров места отведенного под текст ссылки, иначе придется делать фиксированную ширину для нее, со всеми вытекающими от сюда негативными последствиями.

Задавая иной размер border-а, возможно, кое-где потребуется дополнительная правка, легко можно изменить наклон отрезанного уголка.

Вот собственно и все.

На страничке с линками на примеры ищем ссылку menu_border.