HTML тег <div>

Тег div в HTML

Тег <div> представляет собой блочный элемент, с помощью которого можно отображать отдельные фрагменты содержимого в видоизменённом представлении. Наименование тега div было взято из начала английского слова «division», что значит деление.

Внутри универсального контейнера может располагаться текст, картинки, и прочие сегменты html-верстки. Цвет, отступ, масштаб и прочие визуальные модификации задаются с помощью стилей. Для того чтобы уменьшить общее число символов, на страницах сайта, параметры отображения в виде стилей целесообразно выводить в отдельный файл для хранения каскадных стилей, а используемому тегу присвоить class или id с уникальным именем селектора.

Два блока в одном контейнере
Блок div по центру экрана 

HTML

<div id="container">

	<div id="block-01">
		Первый блок
	</div>

	<div id="block-02">
		Второй блок
	</div>

</div>



CSS

#container
{
	width : 50%;
	margin : 17px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
#block-01, #block-02
{
	width : 100px;
	height: 140px;
	padding-top: 12px;
}

#block-01
{
	background-color : #FC0;
	float : right;
}
			
#block-02
	{
	background-color : #069;
	color: #fff;
}
Блок «примечание»
Позиционирование элементов внутри div 

HTML

<div class="note"><div>Примечание:</div>
Текст...</div> 



CSS

.note {
	font-size: 15px;
	color: #000C00;
	font-family: Arial, Helvetica, sans-serif;
	margin: 25px 15px 25px 15px;
	padding: 10px 30px;
	border: solid 1px black;
	background-color: #F9AC0D;
}
.note div {
	font-size: 12px;
	color: #303030;
	font-weight: bold;
	letter-spacing: 3px;
	margin-bottom: 10px;
}