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

Смысл был таков (авторская орфография и пунктуация сохранены):

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

Пока всё хорошо. В принципе, задача очень простая, вполне по силам студенту-первокурснику. Я не ожидал найти для себя что-либо новое, так как делал подобные вещи сотни раз. Но одна вещь меня поразила: разметка.

[-]
View Code HTML
<div id="wrapper">
    <div id="mainContentWrapper">
        <div id="mainContent"></div>
    </div>

    <div id="firstNavColumn"></div>

    <div id="secondNavColumn"></div>
</div>

На мой взгляд, как минимум один <div> здесь явно лишний. Автор оправдывает это тем, что это необходимость, благодаря которой мы сможем более гибко и легко позиционировать блоки, для дальнейшего их смещения при изменении ширины экрана.

Естественно, мне стало интересно, возможно ли избавиться от лишних элементов, не несущих семантической нагрузки?

Начнем с разметки:

[-]
View Code HTML
<body class="clearfix">
    <div id="content" class="column"></div>
    <div id="nav1" class="column"></div>
    <div id="nav2" class="column"></div>
</body>

В реальной жизни имеет смысл использовать семантически значимые идентификаторы и имена классов.

Теперь таблица стилей:

[-]
View Code CSS
html, body {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    overflow: auto;
    height: 100%;
}

body {
    font: 1.1em/1.6em Verdana, Tahoma, Arial, Helvetica, sans-serif;
    background: #EEE;
    color: #000;
    height: auto;
    min-height: 100%;
    min-width: 760px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

html>body .clearfix {
    display: block;
}

.clearfix {
    display: inline-block;
}

.column {
    float: left;
}


#content {
    width: 456px;
    float: left;
    min-height: 100%;
    margin: 10px 21px 10px 10px;
    padding: 10px;
    border: 2px solid #BBB;
    background: #FFF;
}

#nav1 {
    width: 200px;
    margin: 0 11px;
    padding: 0;
}

#nav2 {
    width: 200px;
    margin: 0 11px;
    padding: 0 0 20px;
}

Стили для IE:

[-]
View Code CSS
* html body {
    height: 100%;
    width: 955px;
}

* html #content, * html #nav1, * html #nav2 {
    display: inline;
}

/*\*/
* html .clearfix {
    height: 1%;
}
/**/

Живой пример.
Скриншоты.

Несколько замечаний:

  • на самом деле далеко не все CSS-правила нужны, многие декларации ориентированы на презентацию, нежели на разметку
  • если необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один <div>. Детальнее это описано здесь. Если же нужен нижний колонтитул (сразу под колонками), то ему нужно будет задать clear: left.
  • метод центрирования колнок внутри контейнера описан здесь.
Добавить в закладки
  • del.ici.ous
  • Digg
  • Furl
  • Google
  • Simpy
  • Spurl
  • Y! MyWeb
  • БобрДобр
  • Мистер Вонг
  • Яндекс.Закладки
  • Текст 2.0
  • News2
  • AddScoop
  • RuSpace
  • RUmarkz
  • Memori
  • Закладки Google
  • Писали
  • СМИ 2
  • Моё Место
  • Сто Закладок
  • Ваау!
  • Technorati
  • RuCity
  • LinkStore
  • NewsLand
  • Lopas
  • Закладки - I.UA
  • Connotea
  • Bibsonomy
  • Trucking Bookmarks
  • Communizm
  • UCA

Связанные записи

18
Март
2008

Комментарии к статье «Легко изменяемый макет фиксированной ширины» (3)  »

  1. Анатолий says:

    (если необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один . )(с)
    Товарищи, Читайте книги Ростислава Чебыкина, и никогда у вас не будет проблем с закрепелнием подвала сайта, без всяких дополнительных “Дивов”

  2. Vladimir says:

    Видите ли, Анатолий, в теории оно всё хорошо. Но когда дело доходит до практики и когда требуется поддержка Internet Explorer 6, в реальности всё намного хуже.

    Если Вы обратите внимание, то высота у макета составляет 100%, при этом ни одна из колонок не завернута в контейнер (роль контейнера выполняет <body>). Проблема в том, что когда высота контента каждой из колонок заранее неизвестна (то есть нельзя определить, какая из колонок будет длиннее), а также неизвестна высота окна (viewport), без лишнего <div> будет очень трудно. Если задать padding-bottom у контейнера с колонками, чтобы разместить в нем подвал (как оно обычно и делается), то возникает проблема с W3C box model, ибо в height: 100% padding-bottom уже не входит. То есть при стопроцентной высоте и таким решением всегда будем получать вертикальную прокрутку (и overflow: hidden здесь не выход).

    В любом случае, если Вы предоставите решение, которое:

    • не использует таблицы;
    • имеет стопроцентную высоту;
    • в котором подвал расположен в самом низу экрана, вне зависимости от разрешения/количества контента;
    • использует только 4 <div> (три на колонки, один на подвал)

    то мне будет очень интересно на него посмотреть, ибо учиться никогда не поздно :-) А пока это бездоказательно :-)

  3. Vladimir says:

    overflow: auto у элемента html нужен только для IE (по-моему, только для IE6, но седьмому вроде не вредит — нет под рукой, чтобы проверить). А в Konqueror 3.5.9 этот overflow: auto создает очень неприятные эффекты. Так что лучше подправить правила так, чтобы они были видны только IE.

Подписаться на RSS-ленту комментариев к статье «Легко изменяемый макет фиксированной ширины» Trackback URL: http://blog.sjinks.org.ua/css/41-easy-changeable-fixed-size-layout/trackback/

Оставить комментарий к записи «Легко изменяемый макет фиксированной ширины»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя