SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Getting an image to float correctly

    Please see the attached image. The image is red. The paragraph is blue (has some padding). I'm looking for the image staying there as the text in the paragraph continues downward (note that the paragraph text does not move to the beginning of the line once it is clear of the image) It stays flush to the right of the image.
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you place the image in its own container such as a p element and then give it a class that floats it left. You can then just add a margin-left to the other content that is wider than the image.

    There is an old example here : (except that I would have preferred to put the image in a p element also just to keep it tidy).

    http://www.pmob.co.uk/temp/nowrap.htm

    However that will give the three pixel jog in IE6 when the text is lower than the height of the image.

    A more advanced way is to utilise "haslayout" for IE and overflow for other browsers and you end up with a demo like this.

    http://www.pmob.co.uk/temp/gallery-imageclear.htm

    Hope that helps

  3. #3
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As, always, it worked flawlessly in FF, but I think I'm missing something in IE. IE's text is aligned perfectly except that there is about a line's worth of space that keeps the text's top from being flush with the top of the image.

    Lookin over my code. Thanks for the post.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Check the default top margins of the elements you are using. Firefox usually has a default of 1 em to most elements like paragraphs but IE only has a bottom margin by default.

    Make them both the same.

    It may be another issue but without seeing it's hard to guess


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •