Вот как нужно верстать каркас веб-страницы. Спасибо Alessandro Fulciniti за неоценимую работу в подготовке колекции шаблонов валидной верстки div-вами или как еще говориться «дивной» верстки.

Кстати, долго не утихали споры по поводу: «какая верстка лучше: табличная или верстка слоями (div-ами)?» – и определиться в пользу более прогрессивного «дивного» варианта мне помогла именно эта колекция шаблонов. А табличную верстку нужно применять только там, где это нужно – то-есть при создании таблиц.

Макеты верстки DIV-ами

• Three percentage columns (n.01)
• Three percentage columns (n.02)
• Three percentage columns (n.03)
• Three percentage columns (n.04)
• Three percentage columns (n.05)
• Three percentage columns (n.06)
• Three fixed columns (n.7)
• Three fixed columns (n.8)
• Three fixed columns (n.9)
• Three fixed columns (n.10)
• Three fixed columns (n.11)
• Three fixed columns (n.12)
• Liquid, secondary columns fixed-width (n.13)
• Liquid, secondary columns fixed-width (n.14)
• Liquid, secondary columns fixed-width (n.15)
• Liquid, secondary columns fixed-width (n.16)
• Liquid, secondary columns fixed-width (n.17)
• Liquid, secondary columns fixed-width (n.18)
• Liquid, three columns, hybrid widths (n.19)
• Liquid, three columns, hybrid widths (n.20)
• Liquid, three columns, hybrid widths (n.21)
• Liquid, three columns, hybrid widths (n.22)
• Two columns liquid, side fixed (n.23)
• Two columns liquid, side fixed (n.24)
• Two percentage columns (n.25)
• Two percentage columns (n.26)
• One column liquid and two halves (n.27)
• One column liquid and two halves (n.28)
• Two percentage columns and one larger (n.29)
• Two percentage columns and one larger (n.30)
• Two columns liquid, fixed side and large one (n.31)
• Two columns liquid, fixed side and large one (n.32)
• Two colums fixed (n.33)
• Two colums fixed (n.34)
• Two colums fixed (n.35)
• Two colums fixed (n.36)
• Two colums fixed (n.37)
• Two colums fixed (n.38)
• One column fixed and two halves (n.39)
• One column fixed and two halves (n.40)

Все макеты используют валидные разметки и CSS, и успешно протестированы на Internet Explorer / Win 5.0, 5.5, 6 и Beta 2 Preview версии 7, Opera 8.5, Firefox 1.5 и Safari 2. Каждая из колонок может быть длинной, а также для тестирования длины столбцов использованf javascript-функция наполнитель по требованию.

Каждый макет – это каркас с пяти основных разделов: заголовок, содержание, навигация, другие вещи и нижних колонтитулов. Основная разметка, общая для всех макетов, следующая:

<div id="container">
    <div id="header"> Заголовок </div>
    <div id="wrapper">
        <div id="content"> содержание </div>
    </div>
    <div id="navigation"> навигация </div>
    <div id="extra> Дополнительный материал </div>
    <div id="footer"> Подвал </div>
</div>

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

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

Источник: http://blog.html.it/layoutgala/