SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating images in image gallery

    Here's one I'll be working on over the Thanksgiving weekend (yeah, I'm becoming a CSS nerd. What can I say - I like puzzles!)

    I want to create a small image gallery of thumbnails using floats. I'd like them all floated. The problem is that my images are different heights, so when I float them, some of them get "stuck" on the taller images that preceed them.

    Obviously I'm missing something. What can I use to make room for the shorter images to drop past the taller ones? I guess the easy thing to do would be make all the thumbnails the same dimensions, but where's the challenge in that??

    Thanks!
    Last edited by Eileen Dover; Dec 18, 2007 at 09:43.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the images where contained within something (probably an <a> link if they are thumbnails), then the easiest way would be to float the <a>s and give them a defined height equal to the expected maximum height of any thumbnail.

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

    As Centauri says the easiest option is to declare a fixed height so that the floats don't snag when they wrap. You can then position the images within that height with a little thought.

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

    There is a method of managing images of unknown width and height but involves a number of hacks and as far as I know these are the only examples that can do this.

    http://www.pmob.co.uk/search-this/stcaption1.htm
    http://www.pmob.co.uk/search-this/stcaption2.htm
    http://www.pmob.co.uk/search-this/stcaption3.htm
    http://www.pmob.co.uk/search-this/stcaption4.htm

    You can find an article on in my blog sig that explains how to do it but its an awful lot of effort with little reward.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    USA
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies!


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
  •