Clearing floats without introducing a new line. How?

[Andrey Tarasevich]

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

 

[Mark Parnell]

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,

Don't believe everything you read on the Net. Most of it is wrong, to
varying degrees.

I can easily
achieve that by first clearing the floaters through a <br> element with a
'clear' attribute

That will work, though with side effects, as you noticed:

This works, but unfortunately the <br> element has an unwanted side effect - it
introduces a line break,

That's what a <br> is for. ;-)

Hint: add the clear attribute to the <hr> instead.

 

[Andrey Tarasevich]

That's what a <br> is for. ;-)

Hint: add the clear attribute to the <hr> instead.

Thanks. It works perfectly! How come I didn't think of it myself? I have an
excuse though: I was busy trying to add a "height:0" property to the <br>...