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

Как не печально, но полноценной альтернативы верстке с помощью 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, поможет справиться и с этим.

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