Почему размер div для классов sidebar_conteiner и sidebar не соответствует значениям?

div с классом "Sidebar_conteiner" имеет больший размер, чем с классом "Sidebar" однако на странице получилось наоборот. Я вставил свойство border для наглядности http://valyakin.ru/screens/screen1.png Почему так?

.sidebar_conteiner {
	border: solid 1px black;
	float: right;
	width: 224px;
}
.sidebar {
	float: right;
	width: 222px;
	padding: 5%;
	margin: 0 0 16px 0;
	border: solid 1px #f2f2f2;
	border-radius: 5px;
	background-color: #f9f9f9;
}

html

css

4 ответов

В html верстке класс задан точно такой .sidebar_conteiner? С ошибкой в слове container?

Как весь код выглядит?

да. имя классов одинаковое и в html и в css. В противном случае мы бы не увидели бордер. На самом деле если убрать свойство padding: 5%; то они станут равными. Но в описании свойства padding я не нашел, что оно способно увеличивать элемент.

Такого фрагмента достаточно?

<div class="sidebar_conteiner">
				<div class="sidebar">
					<h2>Поиск</h2>
					<form method="post" action="#" id="search_form">
						<input type="search" name="search_field" placeholder="Ваш запрос" />
						<input type="submit" class="btn" value="найти" />
					</form>
				</div>
</div>