Clearing floats without introducing a new line. How?

Discussion in 'HTML' started by Andrey Tarasevich, Aug 18, 2005.

  1. 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
    Andrey Tarasevich, Aug 18, 2005
    #1
    1. Advertising

  2. Andrey Tarasevich

    Mark Parnell Guest

    Previously in alt.html, Andrey Tarasevich <>
    said:

    > 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.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
    Mark Parnell, Aug 19, 2005
    #2
    1. Advertising

  3. Mark Parnell wrote:
    >
    >> 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.


    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>... :)

    --
    Best regards,
    Andrey
    Andrey Tarasevich, Aug 19, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Sandeep Dutta
    Replies:
    16
    Views:
    1,427
    Walter Banks
    Dec 14, 2004
  2. Replies:
    3
    Views:
    16,165
    Thomas Weidenfeller
    Mar 10, 2006
  3. Ilias Lazaridis
    Replies:
    1
    Views:
    291
    Ilias Lazaridis
    Sep 20, 2006
  4. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,234
    Tim Rentsch
    Sep 23, 2005
  5. vin2ktalks
    Replies:
    0
    Views:
    304
    vin2ktalks
    Oct 10, 2006
Loading...

Share This Page