You are here: Clearing floats without introducing a new line. How? « HTML « IT news, forums, messages
Clearing floats without introducing a new line. How?

Posted by Andrey Tarasevich on 10/28/62 11:24

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

 

Navigation:

[Reply to this message]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация