Совсем чуть-чуть теории

В стандарте CSS заложено, что конечная ширина блока формируется из размера padding-отступа, ширины рамки (если у рамки по горизонтали 2 края, то этот размер нужно еще умножать на 2) и ширины текста. То значение width, которое все указывают блоку div и являлось шириной текста. Многие думают, что это ширина блока, но это не так. Именно так думал и я.

В CSS есть инструмент, который позволяет обойти такое положение вещей и позволяет css-параметром width задавать ширину блока без учета отступов и бордеров.

Решение задачи

<style type="text/css">
  div.noborder { 
      width: 100%; /* Ширина */
      padding: 20px; /* Поля */
      border: 1pz solid black; /* Рамка */
      -moz-box-sizing: border-box; /* Для Firefox */
      -webkit-box-sizing: border-box; /* Для Safari и Chrome */
      box-sizing: border-box; /* Для IE и Opera */
  }
</style>

Параметры -moz-box-sizing и -webkit-box-sizing необходимы для того, чтобы старые версии брузеров Firefox и Safari понимали, что включать ширину рамки и размеры отступов в этом случае не нужно.

Каждый специалист должен ежедневно искать новую информацию в своей области деятельности. Ведь не даром говорят, что жизнь – это движение только вперед. Если вы прожили день и ничего нового из него не вынесли, то будьте уверены, что прожили этот день зря!