Как фиксить отступы у блоков float: left?

Question

[PO6OT]

На странице woonem.tk/feed при ширине экрана около 400px надписи заголовков смещаются и выдавливают вправо текст в следующем после них блоке, заезжая на следующий блок.
Как исправить смещение? Баг появился после совмещения в одной строке двух блоков с разным выравниванием.

Answer 1

[Aigelov]

<div class="frame">
<div style="display: block; float: left; width: 100%;">
<div class="leftstr"><h1>Тестовая запись 15</h1></div>
<div class="rightstr">29.06.15</div>
</div>
<br><div class="quote">
Два больших быка бежали в две клетки за двумя зайцами. Большой магистр кот отравил дурной кислотой двадцать королевских лошадей.</div>

</div>

Добавил код "float: left; width: 100%", так как в этой дивке
<div style="display: block;">....</div>
нету высоты

Хотя, лучше через класс clearfix (habrahabr.ru/post/189118)

Comments

[PO6OT]

не помогло

[Aigelov]

Вадим Егоров:
leftstr, rightstr width: 50% по хорошему нужно убрать и rightstr добавить float: right.
Но на очень маленьких экранах, в любом случае дата опустится ниже.
Было бы лучше использовать bootstrap последней версии

[PO6OT]

Aigelov: спасибо, я использовал clearfix.
и на очень маленьких экранах дата пусть опускается, это не смертельно. я уберу width: 50% и поставлю float: right.
Но самое главное - эти стили прямиком скопированы из примера от htmlbook.ru. неужели редактор этого сайта такой тупой, что не оставил заметку про clearfix

[Aigelov]

Вадим Егоров: You are welcome :)
Может у них старые примеры лежат, не отредактированные на новый лад.

[PO6OT]

Aigelov: может

[PO6OT]

Aigelov: у меня ещё вопрос - как теперь убрать отступ заголовка от текста?

[PO6OT]

там отступ как один < br>

[Billy Milligan]

Вадим Егоров: убрать < br>?

[PO6OT]

Billy Milligan: какой < br>? нет его там

[PO6OT]

Billy Milligan: а да, есть