Блочная модель

Ширина блока включает внутренний отступ (padding) и не включает внешний отступ (margin). Отступы записываются начиная сверху по часовой стрелке (4 значения), и сверху-снизу слева-справа (если два значения), например, margin: 10px 20px (это внешний оступ сверху-снизу 10, и слева справа 20. три значения говорят о том, что отступ должен быть на первое значение: сверху, второе значение: слева-справа, и третье значение: снизу.

толщина границы border-width: 3px;
стиль границы border-style: solid;
цвет границы border-top-color: black;
толщина нижней границы border-bottom-width: 5px;
стиль левой границы border-left-style: dashed;
стиль нижней границы border-bottom-style: dotted;

ширина блока width: 300px;
высота блока height: 400px;
размер блока определяется границей box-sizing: border-box;
размер блока определяется контентом box-sizing: content;

(в зависимости от контента)
максимальная высота блока max-height: 100px;
максимальная ширина блока max-width: 600px;
минимальная высота блока min-height: 200px;
минимальная ширина блока min-width: 300px;
скрыть контент overflow: hidden;
скролить скрытый контент overflow: scroll;
автоопределение скролла контента overflow: auto;
скролл может быть только по вертикали overflow-y: scroll;
скролл может быть только по горизонтали overflow-x: scroll;
расстояние между границами ячеек border-spacing: 20px;

Обтекаемая левая колонка

margin: 50px auto;
width: 50%;
float: left;

Обтекаемая правая колонка

margin: 50px auto;
width: 50%;
float: right;


для того, чтобы корректно определялась высота блоков после float можно убрать обтекание с обоих сторон (очистить поток) с помощью пустого блока div.clear {clear: both;}

корректный способ сброса обтекания называется 'clearfix', например:

class='clearfix'
.clearfix:after {
content: "";
clear: both;
}

левая колонка

width: 400px;
две колонки без float одинаковой высоты
(рамка вокруг параграфа)

правая колонка

width: 500px;


скрыть отображение display: none;