Почему выезжает див?

Question

[Сергей Чистяков]

Ситуация такая.

<div>
	<div class="content"></div>
	<div class="date"></div>
	<div class="autor"></div>
</div>

Это у нас составная единица поста (сообщения). Она находится в таблице и все вместе идут друг за другом идут вниз. А теперь кот в мешке. Почему внутренние дивы наезжают на другие внутренние дивы? Или по-другому: почему дата и автор наезжают на другой пост? Эффект конечно прикольный, но все-таки это баг.

Answer 1

[Юрий Лобанов]

Судя по тому, что Вы не приложили css и надеетесь получить ответ по html - причина в Ваших кривых руках и полном непонимании принципов верстки. Без обид, конечно же.

tape, судя по css не может быть дивом-оберткой трех внутренних, так как далее Вы пишете, что все внутренние дивы в tape должны иметь ширину 100%

Короче, вот пример. Ничего никуда не наезжает, все себя ведет как надо.
codepen.io/anon/pen/tuLjb

Comments

[Сергей Чистяков]

Спасибо. Ошибку понял.

Answer 2

[Bogdan Odarchenko]

А можно css а то вообще не ясно, а лучше место где баг

Answer 3

[Виталий Киренков]

.clearfix::before,
.clearfix::after { content: " "; display: table;}
.clearfix::after { clear: both;}

<div class="clearfix">
	<div class="content"></div>
	<div class="date"></div>
	<div class="autor"></div>
</div>

Возможно поможет... если нет, то соглашусь с iiil =))

Comments

[Виталий Киренков]

#tape > div {
width: 100%; height: 100px;

Вы сами же жёстко высоту прописали "height: 100px;"
Уберите и будет счастье. Наверное.

[Сергей Чистяков]

Вот именно что прописал я из-за того, что было не все в порядке с высотой. Но этот параметр ничего не изменил.

Answer 4

[Сергей Чистяков]

@iiil @DeLaVega @Neko3 @spatNeHochu извиняюсь. CSS в студию:

table {
	border-spacing: 0px;
}
table tr:first-child td {
	border: 1px solid #000;
	color: #a90;
}
#tape {
	width: 300px;
}
#tape > div {
	width: 100%; height: 100px;
	border: 1px solid #000;
	margin-bottom: 10px;
}
.content {
	width: 90%;
	padding: 5%;
	border: 1px solid #000;
	color: #e00;
}
.date {
	width: 40%;
	padding: 5%;
	float: left;
}
.autor {
	width: 40%;
	padding: 5%;
	float: left;
}

И tape здесь - внешний див, собирающий дивы с классами автор, дата и контент.