@dyuisenov

Почему тег div не охватывает некоторые элементы внутри себя?

Почему-то тег div с классом "container" охватывает только элемент h2, а остальное будто не видит.

<section>
		<div class="container">
			<h2 class="section__title">Обо мне</h2>
			<div class="mission">
				<h2 class="mission__title secondary-title">О миссии</h2>
				<div class="line"></div>
				<p class="mission__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p class="mission__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.</p>
			</div>
			<div class="merits">
				<h2 class="merits__title secondary-title">О заслугах</h2>
				<ul class="honors">
					<li class="honors__item honors__item_beetle">
						<span class="honors__intro">Волшебный жук</span>
						<span class="honors__outro">Позволяет быть в тонусе</span>
					</li>
					<li class="honors__item honors__item_bell">
						<span class="honors__intro">Особый колокольчик</span>
						<span class="honors__outro">Позволяет не проспать</span>
					</li>
					<li class="honors__item honors__item_lightning">
						<span class="honors__intro">Человек-молния</span>
						<span class="honors__outro">Я сдаю все проекты раньше</span>
					</li>
					<li class="honors__item honors__item_camera">
						<span class="honors__intro">Фотографирую</span>
						<span class="honors__outro">Просто мне это нравится</span>
					</li>
				</ul>
			</div>
		</div>
	</section>


.container {
	width: 940px;
	margin: 0 auto;
}

.section__title {
	display: block;
	text-align: center;
	text-transform: uppercase ;
	font-size: 27px;
}

.mission {
	width: 400px;
	float: left;
}

.secondary-title {
	font-size: 22px;
}

.secondary-title:after {
	content: '';
	display: block;
	width: 72px;
	height: 3px;
	background: #4e8598;
	margin-top: 5px;
}

.merits {
	float: right;
}

.honors__item {
	padding: 10px 0;
	margin-bottom: 10px;
}

.honors__intro {
	color: #4e8598;
	font-weight: bold;
	font-size: 16px;
	margin-right: 28px;
}

.honors__outro {
	font-size: 15px;
	color: #b0b2b3;
}

.honors__item_beetle {
	background: url('../img/beetle.png')no-repeat left center;
	padding-left: 63px;
}

.honors__item_bell {
	background: url('../img/bell.png')no-repeat 2px center;
	padding-left: 63px;
}

.honors__item_lightning {
	background: url('../img/lightning.png')no-repeat 9px center;
	padding-left: 63px;
}

.honors__item_camera {
	background: url('../img/camera.png')no-repeat 2px center;
	padding-left: 63px;
}
  • Вопрос задан
  • 124 просмотра
Пригласить эксперта
Ответы на вопрос 2
@strelok011
Про флоаты пояснили уже - почитайте прл поток в верстке, и как и чем контейнеры вырываются из потока. Меньше будет проблем в дальнейшем.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы