960 Grid System: зачем нужны CSS фреймворки

Владимир | | CSS, HTML, Web разработка.

960grid logo

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.

1) Фреймворки увеличивают размер страницы.

2) Загоняют разработчика в определенные рамки. Например, 960 grid предназначен для верстки страниц с шириной 960рх.

3) Многим не нравятся имена классов вроде «grid-16».

4) Кто-то считает, что нужно самому создавать фреймворк «под себя».

Но давайте посмотрим насколько существенны эти недостатки.

1) Объем файлов действительно увеличивается. Но 960 Grid System состоит из трех файлов, суммарный размер которых — 8 кБ (сжатая версия). Если использовать архивацию размер уменьшается до 1,6кБ.

Вы, конечно, сможете обойтись меньшим количеством кода для конкретной страницы, но разница вряд ли будет больше 1 кБ, т.е. если на вашей страничке есть хотя бы парочка картинок, выигрыш в общем объеме окажется менее 1%.

2) По поводу ограничений. Фреймворк, как и любую библиотеку, имеет смысл использовать в случаях, для которых он разрабатывался. Т.е. если нужна «резиновая» верстка, 960 Grid – не подходящее решение (хотя есть проект Fluid 960 Grid System). Но если в тех. задании сказано, что страница должна иметь фиксированную ширину 960px, то ситуация меняется.

3) Имена классов. На мой взгляд – это вопрос привычки. Цифры в имени означают ширину блока и по ним достаточно просто ориентироваться. Кроме того, никто не запрещает использовать одновременно несколько классов, например,

<div class=”grid_4 sidebar”>…</div>

Класс grid_4 будет использовать фреймворк, sidebar – вашими стилями.

4) Свой фреймворк – это хорошо… если у вас есть время на его разработку и вы уверены, что он получится лучше существующих решений.

Теперь о преимуществах.

1) Время разработки. Оно сокращается и значительно, особенно если у вас есть минимальный опыт работы с фреймворком и вы используете его в подходящей ситуации. Т.е. нужно потратить какое-то время на изучение, но окупается оно очень быстро.

2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает 😉

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

Примечание. Кстати, если вы интересуетесь темой, очень советую почитать статью «Верстка с помощью Grid«.

А теперь небольшой пример.

Допустим, нам нужно сверстать страницу с таким размещением блоков.

layout

Я сразу покажу решение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test 960 Grid System</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/960.css" />
    <style type="text/css">
    p {
        border: solid 1px #eee;
    }
    </style>
</head>
<body>
<div class="container_12">
    <div class="grid_12"><p>Заголовок</p></div>
    <div class="clear"></div>
    
    <div class="grid_4">
        <div class="grid_4 alpha"><p>Левый блок №1</p></div>
        <div class="grid_4 alpha"><p>Левый блок №2</p></div>
    </div>

    <div class="grid_4">
        <div class="grid_4 alpha"><p>Центральный блок №1</p></div>
        <div class="grid_2 alpha"><p>Центральный блок №2</p></div>
        <div class="grid_2 omega"><p>Центральный блок №3</p></div>
    </div>
    
    <div class="grid_4"><p>Правый блок.<br /><br /> Может быть любой высоты.</p></div>
    <div class="clear"></div>
    
    <div class="grid_12"><p>Хвостовик</p></div>
    <div class="clear"></div>
</div>
</body>
</html>

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

Теперь о номерах классов.

Общая ширина макета 960px. Фреймворк позволяет разбить ее на 12, 16 и 24 равных части. В данном случае нам достаточно разбиения на 12 частей. Т.е. класс grid_12 имеет ширину 940px плюс отступы по 10px справа и слева.

Точно также класс grid_4 имеет ширину 960 * 4 / 12 = 320px из которых 20px приходится на отступы.

Если мы поместим подряд три блока с классами grid_1, grid_7 и grid_4, то они займут всю ширину страницы.

Кроме того, есть несколько специальных классов, например, alpha и omega. Они позволяют убрать отступы слева (alpha) и справа (omega) у блока. В данном примере эта возможность используется для того, чтобы убрать отступы у вложенных блоков. Иначе они будут прибавлены к отступам контейнера и, например, расстояние между левой колонкой и центральной будет не 20, а 40px.

Также вы можете использовать класс clear для завершения строки с блоками, а также классы prefix_X, suffix_X, push_X и pull_X для создания различных отступов (вместо X нужно подставить число).

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

Как видите, использовать фреймворк не сложно и его изучение вряд ли отнимет у вас много времени.

В заключение хочу провести небольшой опрос.

Голосование закрыто. Результаты:

Используете ли вы CSS фреймворки?

  • Нет, но планирую попробовать — 71%, 898 голосов
  • Да — 21%, 265 голосов
  • Нет и пробовать не собираюсь — 8%, 108 голосов

Всего проголосовало: 1 271

Удачи!

Постовой

Для малого бизнеса бухгалтерские услуги: Москва и область

  • Пользуюсь этим чудом уже год! Странно, что только сейчас о нем начали писать. Сначала пост на хабре теперь у тебя.
    По делу, классная штука… Раз, два макет готов =)

  • Пользуюсь этим чудом уже год! Странно, что только сейчас о нем начали писать. Сначала пост на хабре теперь у тебя.
    По делу, классная штука… Раз, два макет готов =)

  • MAX

    Из-за невозможности менять ширину, данный фреймворк не очень подходит для практики.

    Я в последнее время присматриваюсь к «Object Oriented CSS Framework». Главное в нем — это ясно и понятно как задавать нужную сетку и произвольные ширины блоков (там логика таблицы). Главная проблема блочной верстки — разная высота парных блоков. Понятно, что можно придумать как обойти, но вот фреймворков с уже встроенной такой возможностью я пока не встречал. 🙁

    • Я согласен, что 960px подходит далеко не всегда, но все-таки используется очень часто (особенно на англоязычных блогах). К тому же есть Fluid 960 Grid System.

      OOCSS — действительно очень интересный вариант.

      Парные блоки. Я согласен с Alex, часто способы выставления одинаковой высоты выглядят как попытка достать левой рукой правое ухо через пятки 🙂 и времени уходит много.

      • До того пользовался CSS framework, тот, который .ru
        Но «пользовался» — это черезчур громко сказано. Так, использовал в качестве библиотеки, из которой можно дёргать по чуть-чуть. Можно сказать, вообще не пользовался.
        И всё недоумевал, почему же css framework.

        А здесь — мгновенно проняло!

        Правда сверстал на 960.gs, а потом заменил css на fluid 960 gs — и макет поплыл мгновенно. Но в принципе, если изначально смотреть, резина или фикс — то должно быть так же удобно.

  • MAX

    Из-за невозможности менять ширину, данный фреймворк не очень подходит для практики.

    Я в последнее время присматриваюсь к «Object Oriented CSS Framework». Главное в нем — это ясно и понятно как задавать нужную сетку и произвольные ширины блоков (там логика таблицы). Главная проблема блочной верстки — разная высота парных блоков. Понятно, что можно придумать как обойти, но вот фреймворков с уже встроенной такой возможностью я пока не встречал. 🙁

    • Я согласен, что 960px подходит далеко не всегда, но все-таки используется очень часто (особенно на англоязычных блогах). К тому же есть Fluid 960 Grid System.

      OOCSS — действительно очень интересный вариант.

      Парные блоки. Я согласен с Alex, часто способы выставления одинаковой высоты выглядят как попытка достать левой рукой правое ухо через пятки 🙂 и времени уходит много.

      • До того пользовался CSS framework, тот, который .ru
        Но «пользовался» — это черезчур громко сказано. Так, использовал в качестве библиотеки, из которой можно дёргать по чуть-чуть. Можно сказать, вообще не пользовался.
        И всё недоумевал, почему же css framework.

        А здесь — мгновенно проняло!

        Правда сверстал на 960.gs, а потом заменил css на fluid 960 gs — и макет поплыл мгновенно. Но в принципе, если изначально смотреть, резина или фикс — то должно быть так же удобно.

  • Alex

    вот сколько читаю про css фремворки, никак не могу понять их суть. Времени при верстке они практически не увеличивают, семантики никакой, много лишнего + еще и еще и ограничения.
    Ведь набросать макет — это дело 15-20 минут.

    ->Главная проблема блочной верстки – разная высота парных блоков.
    Это не проблема, а фича. А если так нужна одинаковая высота — то кто мешает использовать списки и таблицы?

    ps
    Это взгляд со стороны верстальщика с большим опытом работы =)

    • никак не могу понять их суть

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

  • Alex

    вот сколько читаю про css фремворки, никак не могу понять их суть. Времени при верстке они практически не увеличивают, семантики никакой, много лишнего + еще и еще и ограничения.
    Ведь набросать макет — это дело 15-20 минут.

    ->Главная проблема блочной верстки – разная высота парных блоков.
    Это не проблема, а фича. А если так нужна одинаковая высота — то кто мешает использовать списки и таблицы?

    ps
    Это взгляд со стороны верстальщика с большим опытом работы =)

    • никак не могу понять их суть

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

  • Nulpatrol

    2Alex

    А вроде фреймворки немного облегчают работу

    2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает

  • Nulpatrol

    2Alex

    А вроде фреймворки немного облегчают работу

    2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает

  • Alex

    > Владимир
    Я немного слукавил, стандартные макеты у меня есть, но они простые и легкие и не загрязняют html и css код.

    >Nulpatrol
    Зная нюансы ie6 и ie7, поправка заключается в изменении 3-4 максимум 5 стилей,даже при блочной верстке.

    Смысл моего комментария сводится к тому, что для кого эти css фремворки нужны? Ведь на самом деле минусов больше, чем плюсов, причем во много раз.
    Хотя если мне не нужны, это не значит, что всем не нужны =)

    • для кого эти css фремворки нужны?

      Для того, кто не хочет делать свои макеты 😉
      Если серьезно, то дело не в том, что кто-то не хочет их делать. Просто чтобы сделать хороший макет, который можно будет повторно использовать, нужен опыт. А пока его немного, макеты переделываются по 10 раз и времени уходит очень много.

  • Alex

    > Владимир
    Я немного слукавил, стандартные макеты у меня есть, но они простые и легкие и не загрязняют html и css код.

    >Nulpatrol
    Зная нюансы ie6 и ie7, поправка заключается в изменении 3-4 максимум 5 стилей,даже при блочной верстке.

    Смысл моего комментария сводится к тому, что для кого эти css фремворки нужны? Ведь на самом деле минусов больше, чем плюсов, причем во много раз.
    Хотя если мне не нужны, это не значит, что всем не нужны =)

    • для кого эти css фремворки нужны?

      Для того, кто не хочет делать свои макеты 😉
      Если серьезно, то дело не в том, что кто-то не хочет их делать. Просто чтобы сделать хороший макет, который можно будет повторно использовать, нужен опыт. А пока его немного, макеты переделываются по 10 раз и времени уходит очень много.

  • Значит для резиновой вёрстки она не подойдёт?

    • Стандартная версия не подойдет. Но есть Fluid 960 Grid System.

  • Значит для резиновой вёрстки она не подойдёт?

    • Стандартная версия не подойдет. Но есть Fluid 960 Grid System.

  • Использую в работе Fluid 960 в принципе можно сказать я доволен, думаю за такими фреймворками будущее, а сейчас они пока претерпевают этап развития, и поэтому не стоит их так рьяно оценивать

  • Использую в работе Fluid 960 в принципе можно сказать я доволен, думаю за такими фреймворками будущее, а сейчас они пока претерпевают этап развития, и поэтому не стоит их так рьяно оценивать

  • Использую этот фреймворк уже около полугода, и связка 960.gs + reset.css + typography.css даёт отличные результаты.

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

    А во фреймворках это всё уже есть, остаётся только подправить в интересах проекта. И даже если в дизайне всплывёт нестилизованный элемент, то это не вызовет больших нареканий заказчика, так как у него будет установлен некоторый дефолтный стиль 😉

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

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

    У fluid 960 есть небольшие проблемы с кроссбраузерностью и я пытался с ними разобраться пару месяцев назад у себя в блоге — 96% или резиновая модульная сетка для Web (не сочтите за рекламу, просто ссылка в тему).

    Да, ещё добавлю, что дизайнеру реализовать разные идеи дизайна сайтов на 960gs не так уж и сложно (посмотрите хотя бы примеры на самом 960.gs),если заранее ориентироваться на эту сетку. Для сложных и больших изображений, которые не загонишь в направляющие всегда есть background-image в CSS 🙂

    • среднестатистический дизайнер или кодер вряд ли старательно прописывает стили для цитат

      Это зависит от менеджера проекта 🙂

      • Для студий, да, а откуда менеджер проекта у процветающего в Рунете фриланса? 🙂

        • В принципе и заказчик может сравнить страницу с макетом… если, конечно, пример цитаты есть в макете 🙂

  • Использую этот фреймворк уже около полугода, и связка 960.gs + reset.css + typography.css даёт отличные результаты.

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

    А во фреймворках это всё уже есть, остаётся только подправить в интересах проекта. И даже если в дизайне всплывёт нестилизованный элемент, то это не вызовет больших нареканий заказчика, так как у него будет установлен некоторый дефолтный стиль 😉

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

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

    У fluid 960 есть небольшие проблемы с кроссбраузерностью и я пытался с ними разобраться пару месяцев назад у себя в блоге — 96% или резиновая модульная сетка для Web (не сочтите за рекламу, просто ссылка в тему).

    Да, ещё добавлю, что дизайнеру реализовать разные идеи дизайна сайтов на 960gs не так уж и сложно (посмотрите хотя бы примеры на самом 960.gs),если заранее ориентироваться на эту сетку. Для сложных и больших изображений, которые не загонишь в направляющие всегда есть background-image в CSS 🙂

    • среднестатистический дизайнер или кодер вряд ли старательно прописывает стили для цитат

      Это зависит от менеджера проекта 🙂

      • Для студий, да, а откуда менеджер проекта у процветающего в Рунете фриланса? 🙂

        • В принципе и заказчик может сравнить страницу с макетом… если, конечно, пример цитаты есть в макете 🙂

  • Хорошая статья, Владимир.
    Я до недавнего времени пользовался Blueprint, а потом перешел с него на 960gs.

    А вот CSS framework.ru я сколько ни пробовал работать, так и не подружился.

    • Спасибо!
      Я с CSS-framework.ru никогда работать не пробовал, поэтому ничего конкретного не скажу. Но ИМХО лучше всего попробовать два-три фреймворка и хорошо разобраться в том, который больше понравиться, чем «прыгать» с одного на другой, пытаясь найти идеальный 😉

      • лучше всего попробовать два-три фреймворка

        Полностью согласен.

        А по поводу CSS-framework.ru могу сказать, что мне очень понравилась его поддержка: однажды нашел небольшую корявость в отображении меню в ИЕ6. С помощью чата, встроенного на сайте фреймворка, связался с разработчиком. Спустя несколько минут у меня уже был хак к ИЕ, и на следующий день фреймворк был обновлен.

        • Такая поддержка выглядит многообещающе. Фреймворк сразу стал выглядеть гораздо перспективнее 🙂

  • Хорошая статья, Владимир.
    Я до недавнего времени пользовался Blueprint, а потом перешел с него на 960gs.

    А вот CSS framework.ru я сколько ни пробовал работать, так и не подружился.

    • Спасибо!
      Я с CSS-framework.ru никогда работать не пробовал, поэтому ничего конкретного не скажу. Но ИМХО лучше всего попробовать два-три фреймворка и хорошо разобраться в том, который больше понравиться, чем «прыгать» с одного на другой, пытаясь найти идеальный 😉

      • лучше всего попробовать два-три фреймворка

        Полностью согласен.

        А по поводу CSS-framework.ru могу сказать, что мне очень понравилась его поддержка: однажды нашел небольшую корявость в отображении меню в ИЕ6. С помощью чата, встроенного на сайте фреймворка, связался с разработчиком. Спустя несколько минут у меня уже был хак к ИЕ, и на следующий день фреймворк был обновлен.

        • Такая поддержка выглядит многообещающе. Фреймворк сразу стал выглядеть гораздо перспективнее 🙂

  • всё по полочкам, буду дописывать цикл статей, дам ссылку, у меня терпения не хватило на такой ликбез )

  • всё по полочкам, буду дописывать цикл статей, дам ссылку, у меня терпения не хватило на такой ликбез )

  • Pingback: Привет. Что нового? ) | Денис Федосов » Блог()

  • Pingback: Лучшие шаблоны Wordpress, Выпуск 3 | Wordpress - русские шаблоны и плагины()

  • Pingback: Недостатки и приемущества CSS-фреймворков | Мир CSS()

  • Меду прочим спасательный круг. Так геморно до 960 грид было верстать!

  • Меду прочим спасательный круг. Так геморно до 960 грид было верстать!

  • Сергей

    Я конечно извеняюсь, но я ХТМЛ кодингом занимаюсь больше 5 лет. Из них 4 года без таблиц ( только там где они не обходимы. ) За плечами десятки порталов из них 30% «резина».
    Пробовал я framevork, это полный ужас — для обезьян которые не чего не пониамют. Я напишу портал без единого хака — кроме ИЕ6 использую отдельный css файл — и то в редких случаях, как правило я в эту конструкцию помещаю жаваскрипт для фикса PNG.

    И не чего толком фрамеворк по времени не экономит, а только тупеешь, не ищешь своих решений.

    Это мое мнение. Если хотите стать мастерами пишите все с нуль сами, и делайте свой фрамеворк.

    Удачи.

    • По-моему никто и не утверждал, что фреймворками все должны пользоваться 😉 Мне лично было интересно посмотреть как он сделан, и фреймворк какое-то время мне сэкономил.

      Но вы написали

      пишите все с нуль сами, и делайте свой фрамеворк

      Хочу спросить. У вас есть свой фреймворк? И, если да, не хотите ли вы его показать? Мне, например, было бы очень интересно.

  • Сергей

    Я конечно извеняюсь, но я ХТМЛ кодингом занимаюсь больше 5 лет. Из них 4 года без таблиц ( только там где они не обходимы. ) За плечами десятки порталов из них 30% «резина».
    Пробовал я framevork, это полный ужас — для обезьян которые не чего не пониамют. Я напишу портал без единого хака — кроме ИЕ6 использую отдельный css файл — и то в редких случаях, как правило я в эту конструкцию помещаю жаваскрипт для фикса PNG.

    И не чего толком фрамеворк по времени не экономит, а только тупеешь, не ищешь своих решений.

    Это мое мнение. Если хотите стать мастерами пишите все с нуль сами, и делайте свой фрамеворк.

    Удачи.

    • По-моему никто и не утверждал, что фреймворками все должны пользоваться 😉 Мне лично было интересно посмотреть как он сделан, и фреймворк какое-то время мне сэкономил.

      Но вы написали

      пишите все с нуль сами, и делайте свой фрамеворк

      Хочу спросить. У вас есть свой фреймворк? И, если да, не хотите ли вы его показать? Мне, например, было бы очень интересно.

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

    Фреймворк — экономия времени и нервов, вот и всё.

  • Btpublic

    Хм, странноватое голование. А как же насчёт вариант пробовал, но пользоваться не собираюсь.???

  • Да, вы правы. Не учел этот вариант.

  • Одиночка Айс

    Писать нужно под себя, хоть и тяжко ))) ибо классы а ля container_12 выглядят как-то не ахти ))))

  • Т.е. проблема только в именах классов? 🙂

  • Arno Lentz

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

    • Фреймворк не избавляет от написания стилей своими ручками.
      Он позволяет сократить объем работы, которая часто повторяется.

  • Гость

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

  • Martianin

    В исходнике поправь Левый блок №1 на Левый блок №2

  • Наконец то я понял для чего alpha и omega

    • Oleg-body

       Скажите , как сверстать при помощи этого фрэймворка три блока с бордером в 2 пикселя учитывая 12 столбцовый цсс? с бордером третий перелетает на следующую стороку ,как решить проблему?

      • Вы не должны ставить border на блок к которому применяете классы фреймворка. Оберните каждый блок в еще один div и для него установите grid_4.

        • Oleg-body

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

        • А вы попробуйте решить задачу без фреймворка 😉
          Здесь дело в том, что граница прибавляется к ширине блока. Поэтому если у вас ширина задана в процентах, а граница — в пикселах, то будут проблемы (общая ширина такого блока в процентах будет изменяться при изменении размеров окна браузера).

        • Oleg-body

           Решил проблему! Решается смекалкой) Просто нужно прописать в стилях блоков ширину за минус ширины бордера, тогда все умещается ,Спасибо!

        • Очень хорошо, только этот вариант будет правильно работать если у вас ширина блока задана в пикселях.

          Допустим, нужно разместить на странице 2 блока, каждый по полстраницы с границей 10px. Если ширина окна 1000 px, то прописываем ширину блока — 480px. Но если нужна «резиновая» верстка, то придется указать ширину блока в процентах — 48%. Дальше пользователь уменьшает окно браузера до 500px. Ширина блока остается 48%, но это уже 240px, а граница остается равной 10px. Т.е. суммарная ширина блоков будет 10 + 240 + 10 + 10 + 240 + 10 = 520px и второй блок будет перенесен вниз.

          Решение с вложенными div'ами в этом случае работает правильно, т.к. у внешнего div'а просто нет границы.

  • Перешел на 960gs в большинстве случаем вполне хватает этого фреймворка, очень упрощает задачу и экономит времся