Не могу исправить ошибку., float

Привет всем!

В ходе работы столкнулся со следующей проблемой:



Список выводить в виде блогов. Блоги создал с помощью float.
Так вот объект стоит не там, где должна быть (красная стрелка показывает место где должна быть).

И все это из-за длинного текста (синяя стрелка). Как это можно исправить? Можно ли как нибудь часть текста спрятать под блоком? Или как еще можно это исправить?

Ширина столбца на котором размещены эти блоги 780px.

.FilmBlock { width: 195px;
			 max-width: 195px;
			 min-width: 195px;
			 float: left;
			 text-align: center;
			 margin-bottom: 15px;
			 margin-top: 5px; }

<div class="FilmBlock">
    <img src="Ссылка на постер" width="150">
        <br>
        <a href="" class="LinkStandart">Название</a>
        <br>
        <b>Год выпуска</b>
</div>

Это сообщение отредактировал Ramzil_Nixon - 29.03.2014 - 19:29

Ты бы еще мельче картинку сделал Выехавший блок видно, а вот насчет текста не понятно.

А еще лучше - покажи свою разметку.

sergeiss, Теперь все, картинка нормальная

Не видя твою разметку, ничего не скажешь. Только предположить можно. "Гадать на кофейной гуще" можно, но не нужно.
Короче говоря, показывай свою разметку, уже с ней будем думать.

sergeiss, Совсем забыл про разметку.

Ширина столбца на котором размещены эти блоги 780px.

.FilmBlock { width: 195px;
			 max-width: 195px;
			 min-width: 195px;
			 float: left;
			 text-align: center;
			 margin-bottom: 15px;
			 margin-top: 5px; }

Это сообщение отредактировал Ramzil_Nixon - 29.03.2014 - 19:22

Это ты показал стиль "непоймичего". А ты покажи тэги! ДИВы и всё остальное. Что у тебя входит в один блок.

sergeiss, конечно. Вот:

<div class="FilmBlock">
    <img src="Ссылка на постер" width="150">
        <br>
        <a href="" class="LinkStandart">Название</a>
        <br>
        <b>Год выпуска</b>
</div>

Ну, в целом правильно, вроде как... Попробуй еще жестко установить высоту блока (для этого же класса FilmBlock). И, на всякий случай, "overflow: hidden"
И вот это я не понял:

 max-width: 195px;
 min-width: 195px;

У тебя же уже жестко установлена ширина, она не может меняться.

Пробовал уже, не помогает.

Вот это и я не могу понять.

А вот это щас попробую

Помог, спасибо.

даже не смотрел на твои разметки.
все что пришло
например: может и сложновато будер но работать будет
берем картинку и текст разделяем по дивам/правда на ум приходит запутаться можно. но всеже/
ещё ра
разделяем в одном общем диве где и картинка и текс вместе
общий див и в нем ещё два,
один для картинки, второй для текста
теперь задает размер для кртинки /картинка скажем 150 px, значит див 150px
второй той-же штрины НО!
если применить марнинги минусовые
пример вот отсюда просмотр как код/смотри как выравнен Велком от главного дива

margin-left: -179px;

то что выходит
отступ внешний вылезет на столько насколько длинна текста будет нужна
и справа также

margin-right: 179px;

ну а текст внутренними отступами выравнивай
padding-left: 79px;

что будет в результате див прежний, а вот размер текста в нем будет вылазить поверх его
картинки не пострадают :)

Ramzil_Nixon посмотри в сторону display: inline-block; за места float, а блоки сделай через <ul> <li>
для примера http://learn.javascript.ru/task/raznica-inline-block-i-float

Я бы запилил через таблицу и не парил мозг

ну и зря

Таблица тут не годится. Потому что там не будет динамически меняться количество элементов в строке.