Hello
Consider the following HTML code sketch
<div>
<img src="..." style="float: left">
<p>Paragraph text</p>
</div>
<hr>
If the <p> text is short, the <hr> element will be squeezed between the floating
image and the right edge of the viewport. I need the <hr> element to sit below
the bottom edge of the image. According to what I read on the Net, I can easily
achieve that by first clearing the floaters through a <br> element with a
'clear' attribute
<div>
<img src="..." style="float: left" width=... height=...>
<p>Some text</p>
<br clear="all">
</div>
<hr>
This works, but unfortunately the <br> element has an unwanted side effect - it
introduces a line break, i.e. an extra empty line. This is not noticeable when
the height of the <p> paragraph is small. However, once this height gets close
to the height of the image, the extra blank line starts to appear below the
image and above <hr> element. If the paragraph height is greater than the height
of the image the extra vertical space will exist under the bottom of the paragraph.
This is not acceptable in my case. Hence the question: how can I issue a
directive to clear all floaters without taking up any vertical space? Is there a
"zero-height way" to do that?
Best regards,
Andrey
