Border наползает на img

[volkov59]

У тега H2 есть нижний border.

Есть img элемент. У него float:left; Далее идет текст, который, собственно, обтекает элемент img справа. Все нормально, пока текст не доходит до тега H1: сам текст (что в теге H1) имеет нормальный отступ слева (т.е. ширина изображения), а вот нижняя рамка, заданная border-left:... как бы не видит изображения слева и простирается на всю ширину (т.е. проходит под изображением (изображение с прозрачным фоном)).

Пробовал и в мозиле и в ie - эффект один и тот же. Подскажите как быть.

[Justnewone]

Да, точно, как бы не видно ни кода ни изображения как бы ответа не будет.

[psywalker]

Да, точно, как бы не видно ни кода ни изображения как бы ответа не будет.

Да, а лучше ссылку, скриншот и подробное объяснение(пора мне прикрепить эту фразу в подписи )

[volkov59]

http://seleniya.ru/np/257/bykovo-poselok.html

Смотрите: "Историческая справка" (это тег H2) имеет отступ, а вот нижний бордер, что прописано у H2, не имеет!

Стиль img c гербом:

float:left;

margin-right:10px;

margin-bottom:5px;

Стиль H2:

h2{

font-weight:bold;

color:#5E8A81;

font-size:14px;

margin: 20px 0px 10px;

border-bottom:2px solid #D5E3E0;

padding-left:5px;

}

Edited January 14, 2010 by volkov59

[Dessss]

overflow:hidden;

height:1%;

[psywalker]

У меня везде у заголовков есть рамки.

[Searcher]

возможно помощь будет от свойства clear:both для элементов h2 ?

также возможно достаточно будет overflow:hidden для h2, как говорит Dessss, однако использование height:1% может привести к проблемам.

[Searcher]

чтобы только горизонтальная черта равнялась по картинке, достаточно overflow:hidden для h2

[volkov59]

Спасибо за ответы! overflow:hidden помогло. Просто не понятно, почему нижний бордер выходит за пределы, а надпись нет.

[Dessss]

Да потому что h2 по своему дефолтному состоянию является блочным элементом. А чему равна ширина блочного элемента? Ширине родителя. Вот и получалось что h2 с бордером занимал всю ширину родителя а текст становился слева. Давши overflow ты обрезал часть блока которая уходила под картинку влево. Для большего понимания посмотри firebug с оверфлов и без и сразу поймешь все.