Как правильно сверстать линию, которая у меня залазит под float?

Question

[Odinokun]

Добрый вечер.
Подскажите плз, как исправить верстку, что-бы линия не залазила под картинку со свойством float?
вот кусочек кода на нем красная линия залазит под "фото", а надо что бы она закончилась на границе текста.

Comments

[Moskus]

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

[Odinokun]

Moskus: не совсем понял вопрос. Я приложил скрин реально сверстанного сайта и кусок кода в котором заменил ссылки на img на заливку.

[Moskus]

Дмитрий: Это только вам известно, что картинка - это "скрин реально сверстанного сайта". Для тех, кто читает ваш вопрос, ситуация выглядит так:
Вы задаете вопрос, даете ссылку на jsfiddle (чего более чем достаточно, чтобы увидеть, что у вас не так), а еще прикладываете пример, который совпадает с тем, что иллюстрирует код на jsfiddle. Было бы логично либо ограничиться jsfiddle, либо привести пример картинки, где показано, чего же вы хотите добиться, а не наоборот.

Answer 1

[Тимофей Белоусов]

.inform_line {
     background-color: red;
     height: 8px;
     margin-bottom: 10px;
     overflow: hidden; /*Добавь это свойство и будет тебе счастье*/
}

Comments

[Odinokun]

Спасибо. То что надо.

Answer 2

[Михаил Горячкин]

.inform_line {
    background-color: red;
    height: 8px;
    margin-bottom: 10px;
    margin-left: 215px;
  }

Другими словами добавьте ей отступ слева.