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

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

Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:

Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS.

Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):

шапка сайта

низ сайта

Теперь, на странице style.css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока:

#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; }

Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:

Такое позиционирование элементов называется позиционированием в нормальном потоке . Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.

По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В CSS же нам предоставляются и другие схемы позиционирования:

• абсолютное позиционирование


• относительное позиционирование


• плавающая блоковая модель

Для определения схемы позиционирования используется свойство position , оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:

• static - блок позиционируется в нормальном потоке. Это значение по умолчанию.


• relative - относительное позиционирование (относительно нормального потока).


• absolute - абсолютное позиционирование


• fixed - фиксированное позиционирование (фиксируется относительно области просмотра).

Сегодня мы рассмотрим абсолютное позиционирование , остальные схемы будем рассматривать в следующих уроках.

Абсолютное позиционирование

При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:

• left - указывает на сколько надо сместить блок относительно левого края окна.


• right - указывает на сколько надо сместить блок относительно правого края окна.


• top - указывает на сколько надо сместить блок относительно верхнего края окна.


• bottom - указывает на сколько надо сместить блок относительно нижнего края окна.

Вернемся к нашему примеру. Наши блоки header , menu и footer позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо.

А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu , т.е. на 190 пикселов, а от верхнего края окна на высоту блока header , т.е. на 100 пикселов.

#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px; } #footer{ background:darkred; width:715px; height:30px; }

Теперь наша страница в браузере выглядит так:

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

Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px , т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:

body{ margin:0px; }

Теперь наша страница выглядит так, как мы и ожидали:

В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому.

Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:

Тогда в нашу html-страницу, в div id="content" мы добавим div id="news" :

шапка сайта

Контент

блок новостей

низ сайта

Тогда в таблице стилей смещение мы будем указывать относительно блока content :

#news{ background:yellow; width:150px; height:280px; position:absolute; left:365px; top:10px; }

Ширина блока content равна 525 пикселов, а ширина блока news - 150 пикселов. Значит, смещение от левого края равно (525-150) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365 пикселов.

Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10.

При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя".

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

Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.

В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!

Особенности блочных элементов

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

Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.

Главным в блоке выступает контент .

Вокруг него расположены поля, которые называются padding . Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.

После идут сами границы, которые именуются английским словом border .

И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.

В качестве примера запрограммируем 2 и заполним созданные элементы текстом.

На данный момент в этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.

Внесем-ка ярких красок в обыденную жизнь html

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

Для этого в контейнере head после тега

Блок в css - 2.

Блок в css - 3.

В результате:

Теперь в CSS я покажу парочку фишек, где возможности блоков HTML расширяются.

Рамка блока в CSS

Свойство « BORDER »
Я частенько использую рамку, когда создаю веб-страницы. Рамки мне помогают увидеть, где начинается блок и где заканчивается. Это мне упрощает работу. Также рамку можно использовать для оформления блоков.
Чтобы создать к блокам рамки, пропишите уже известное вам правило «border ».

Синтаксис:

Border: толщина_рамки вид_рамки цвет_рамки;

Блок в css -1.

Блок в css - 2.

Блок в css - 3.

Если вы не поняли, где и куда я вписал CSS, то обратите внимание на строки от 4 до 17. И если у вас появился все же такой вопрос, что это я сделал, тогда повторите урок №3 – « ».

Результат:

Теперь можно видеть границы блока, а когда видны границы, тогда легче с блоками работать.

Отступы от блока в CSS

Свойство « MARGIN »
Чтобы задать расстояние (отступ) от блока используют правило «margin ».
Обратите внимание на схему. Параметры задаются от блока:

Свойства:

• top – верхняя сторона
• right – правая сторона
• bottom – нижняя сторона
• left – левая сторона

Margin-top:30px; /* верхняя сторона */ margin-right:70px; /* правая сторона */ margin-bottom:90px; /* нижняя сторона */ margin-left:120px; /* левая сторона */

Сокращенная форма записи

Можно все, что я прописал для отступа при каждом блоке записать отдельно сокращенной формой:

Синтаксис:

Margin: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

Margin:30px 70px 90px 120px; /* сокращенная форма записи */

Блок в css -1.

Блок в css - 2.

Блок в css - 3.

Результат:

Если задать один параметр к правилу «margin » (Строка №22):

Margin:100pх; /* сокращенная форма записи */

то расстояние от блока со всех сторон будет 100 px.

Отступы внутри блока в CSS

Свойство « PADDING »
Чтобы задать расстояние (отступ) внутри блока, используют правило «padding ».
Обратите внимание на схему:

Свойства:

• top – верхняя сторона
• right – правая сторона
• bottom – нижняя сторона
• left – левая сторона

Padding-top:30px; /* верхняя сторона */ padding-right:70px; /* правая сторона */ padding-bottom:90px; /* нижняя сторона */ padding-left:120px; /* левая сторона */

Сокращенная форма записи

Можно все, что я прописал выше записать сокращенной формой.

Синтаксис:

Padding: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

Padding:30px 70px 90px 120px; /* сокращенная форма записи */

Пропишите в HTML файле вот так:

Блок в css -1.

Блок в css - 2.

Блок в css - 3.

Результат:

Если задать один параметр к правилу «padding» (строка № 21):

Padding:50px; /* сокращенная форма записи */

то расстояние внутри блока со всех сторон будет 50 px.

Ширина и высота блока в CSS

Свойство « WIDTH » и « HEIGHT »
Вы можете создать ширину и высоту блока. Для этого используйте правила «width » - ширина и «height » - высота.

Синтаксис:

• height - высота блока;
• width- ширина блока;

Значение:
Значение задается в px или %.

Width: 600px; /* ширина блока */ height: 250px; /* высота блока */

Я думаю, как вставлять правило в CSS объяснять не нужно, заодно проверю, как вы освоили урок №3 о том, как подключить CSS.

Результат:

У блока будет фиксированная ширина и высота.

Если вам нужен нефиксированный, а резиновый блок (блок который растягивается по длине монитора), тогда вместо px, нужно указать %. Только помните: весь монитор – это 100%.

Width: 90%; /* ширина резинового блока */

Фон блока в CSS

Свойство « BACKGROUND »
Правило «background » вы уже знаете, потому не вижу смысла повторяться.
А кто не знает, милости просим на страницу с .

Блок 1.

Строка № 7 – правилом «background » мы заменили фон зеленным цветом

Результат:

Можно залить фон не только цветом, но и картинкой:

Background-image: url(bg.gif); /* Фоновая картинка */

Блок 1.

Строка № 7 – правилом «background-image» мы заменили фон фоновой картинкой.
bg.gif – это картинка фона.

Результат:

ДОПОЛНЕНИЕ

Прозрачность блока в CSS

Свойство «OPACITY»
Блок можно сделать прозрачным, используя CSS правило «opacity ».

Синтаксис:

Opacity: значение;

Значение:
в значениях задается число в диапазоне от 0 до 1.

• Значение 0 – полная прозрачность блока.
• Значение 1 – непрозрачность блока (блок останется такой как есть).
• Значение в дробях (0.5) – полупрозрачность блока.

Блок 1.

Результат:

Скрыть блок в CSS

Свойство « DISPLAY »
Правило «display » поможет скрыть блок веб странице. Зачастую это правило используется в выпадающем меню или когда нужно скрыть некоторые блоки в мобильной версии сайта.

Blok1{display:none;}

Свойство « OPACITY »
Правило «opacity » поможет тоже скрыть блок веб-странице.

Blok1{opacity: 0;}

Свойство « VISIBILITY »
«visibility » – это еще одно правило, которое тоже поможет скрыть блок веб- страници. К правилу «visibility » пропишите значение «hidden »:

Blok1{visibility: hidden;}

Свойство overflow

Свойство «OVERFLOW»
С правилом «overflow » можно определить, что будет предприниматься, если содержимое элемента превзойдет его размер. Например, картинка или текст больше, чем сам блок.

Синтаксис:

Overflow: значение;

Значение:

• Visible - указывает, что при переполнении элемента содержимым, оно не будет обрезаться, а просто выйдет за рамки (значение по умолчанию).
• Hidden - указывает, что контент, который не помещается в элемент, будет обрезан (обрезанная часть будет невидимая).
• Scroll - указывает, что контент, который не помещается в элемент, будет обрезан, но для просмотра обрезанной части, можно будет воспользоваться полосой прокрутки.
• Auto - при переполнении элемента содержимым, полосы прокрутки добавляются автоматически.

Пример с «Visible» (значение по умолчанию):

Блок 1.

Результат:

Пример с «Hidden »:

Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:2px dotted #cc0000; /*рамка */ overflow: Hidden; }

Результат:

Пример с «Scroll »:

Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:2px dotted #cc0000; /*рамка */ overflow: Scroll; }

Результат:

Пример с «Auto»:

Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:2px dotted #cc0000; /*рамка */ overflow: auto; }

Результат:

Тень блока в CSS

Свойство «BOX-SHADOW»
Можно от блока сделать тень. Правило «box-shadow ».

Синтаксис:

Blok1 { height: 200px; /* высота */ width: 250px; /* ширина */ border:1px solid #ccc; /*рамка */ box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*тень блока*/ }

Результат:

Выравнивание блока по центру

Свойство «MARGIN»
Чтобы выровнять блок по центру, пропишите для правила «margin » значение «0 auto »:

Margin: 0 auto;

Blok1 { height: 100px; /* высота */ width: 100px; /* ширина */ border:1px solid #ccc; /*рамка */ margin: 0 auto; }

Вот и все! Пора заканчивать этот урок, а то великоват он получился! Да и храпы за пределами монитора уже слышу .
Еще чуть-чуть и мы закончим изучать основы CSS.

Подписывайтесь на обновление!

Предыдущая запись
Следующая запись

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

Центрирование

Есть много элементов на веб-странице, которые могут по дизайну стоять по центру. Например, заголовки, логотип в шапке или информация в футере. Но как выровнять ее идеально по центру? Конечно, нужно понимать, что высчитывать вручную отступы или применять позиционирование не стоит, когда есть замечательное значение свойства margin – auto:

Block{ margin: 0 auto; }

Block { margin : 0 auto ;

Первое значение этого свойства задает отступ сверху и снизу. Соответственно, вместо нуля вы можете записать свое значение, если необходимо дать такие отступы. Второе значение auto определяет отступы слева и справа. Они определяются так, что элемент станет по центру. Но здесь очень важно соблюсти еще одно правило:

Элементу нужно задать ширину. Обязательно. Я объясню почему. Например, он находится в общем контейнере шириной 980 пикселей. И если вы не зададите явную ширину блоку, то как он выровняется по центру, если он и без этого занимает всю ширину? В общем, достаточно записать width или max-width и центровка будет работать.

Таким же способом можно отцентрировать и те блоки, которые будут вложены уже в этот. Вообще уровень вложенности никак не помешает центровке.

Как создать блок в css и его внешний вид

Я уже говорил в одной из предыдущих статей, что блочные элементы создаются тегом div. Он парный. Это просто пустой контейнер для содержимого. Ему нужно также задать стилевой класс или идентификатор, чтобы получить возможность обращаться к нему через css. Допустим, так:

< div class = "post-anonce" > < / div >

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

Post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; }

Post - anonce { margin : 10px ; padding : 15px ; background : #ccc; border - radius : 15px ; width : 250px ; height : 220px ;

Мы дали нашему фрагменту много разных правил. Например, внешние и внутренние отступы, фон, закругление углов, а также основные размеры – ширину и высоту.

Добавим содержимое

Заголовок статьи

Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.

Читать полностью

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

Картинку мы задали, как будто она лежит в той же папке, что и css-файл, в котором задаются эти стили. Теперь остается оформить ее:

Post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left }

Post - anonce img { width : 64px ; height : 64px ; padding : 10px ; float : left

Зададим ей четкие размеры, прижмем к левому краю, чтобы текст обтекал справа, также дадим небольшие отступы. И вот что в итоге получилось:

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

Тем не менее вот вам простой пример создания блока, в котором есть все необходимое для удобства пользователя.

Как сделать блок невидимым в css

В начале я обещал вам еще несколько манипуляций с блоками. Рассмотрим их коротко, они касаются видимости элемента на странице. Например, добавим только что созданному блоку такое свойство: display: none;

Обновите страницу и вы увидите, что на ней ничего нет – блок исчез. Другой способ убрать его – сделать прозрачным. За это отвечает свойство opacity. По умолчанию все элементы на странице непрозрачные, то есть имеют opacity: 1. Если задать opacity: 0, то блок станет полностью прозрачным. Также можно задавать значения между этими цифрами.

Применение на практике

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

Наведи сюда, чтобы увидеть анонс

< div class = "show-anonce" > Наведисюда, чтобыувидетьанонс< / div >

Так мы создали нужный блок.

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

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

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

.

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

Блок 1

Блок 2

Блок 3

Добавим значение ширины для каждого блока:

Блок 1

Блок 2

Блок 3

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке , друг за другом?

Для этого существует свойство , которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

• left - блок выравнивается по левому краю, обтекание справа
• right - блок выравнивается по правому краю, обтекание слева
• none - обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

Блок 1

Блок 2

Блок 3

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством , которое управляет поведением плавающих элементов:

• left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
• rigth - запрещает обтекание элемента с правой стороны
• both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 4 разместился с новой строки, как нам надо.

В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.

Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину - фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

Почему собственно родителю мы дали класс.wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

Возьмем разметку из предыдущих примеров и усовершенствуем её.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Здесь вроде всё просто.

А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

Блок 1: 10 + 200 + 10 = 220px

Блок 2: 10 + 150 + 10 = 170px

Блок 3: 10 + 100 + 10 = 120px

Блок 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

Как поправить? Можно сделать следующее:

1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

Используем второй вариант, получается так:

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

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

Создаем разметку макета:

Шапка сайта

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus.

Подвал

Пишем стили:

Body { max-width: 900px; /* ограничение максимальной ширины */ margin: 0 auto; } /* для всех блоков внутри body изменяем алгоритм расчета ширины блоков и добавляем все блокам поля 10px */ body div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; } .header { background: #CCA69E; padding: 10px; } .left-sidebar { width: 20%; background: #8ED9B6; float: left; } .content { float: left; width: 60%; } .right-sidebar { width: 20%; background: #FF9282; float: left; } .footer { background: #000; clear: both; /* запрещаем обтекание с обоих сторон, блок выводится с новой строки */ color: #ccc; }

Если что-то непонятно — спрашивайте в комментариях.