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

Ситуация такая.
<div>
	<div class="content"></div>
	<div class="date"></div>
	<div class="autor"></div>
</div>

Это у нас составная единица поста (сообщения). Она находится в таблице и все вместе идут друг за другом идут вниз. А теперь кот в мешке. Почему внутренние дивы наезжают на другие внутренние дивы? Или по-другому: почему дата и автор наезжают на другой пост? Эффект конечно прикольный, но все-таки это баг.
  • Вопрос задан
  • 2584 просмотра
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Судя по тому, что Вы не приложили css и надеетесь получить ответ по html - причина в Ваших кривых руках и полном непонимании принципов верстки. Без обид, конечно же.

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

Короче, вот пример. Ничего никуда не наезжает, все себя ведет как надо.
codepen.io/anon/pen/tuLjb
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
А можно css а то вообще не ясно, а лучше место где баг
Ответ написан
Комментировать
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
.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 =))
Ответ написан
piro1107
@piro1107 Автор вопроса
Студент
@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 здесь - внешний див, собирающий дивы с классами автор, дата и контент.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы