Multi column, variable height float doesn't pack boxes as I want

Discussion in 'CSS' started by looper, May 19, 2008.

0
  1. #1
    I'm trying to use CSS float property to pack a display of variable height boxes with as little wasted space as possible.

    Please see here for example: (scroll down the page past the map)

    http://www.ianandwendy.com/our_trips3.htm

    The problem I think is obvious - I would like Central/South Am to appear right below "Mexico", and "Caribbean" to appear right below "Europe". But what is happening is that Africa causes the layout to drop. I guess what I'm looking for is a "float:top left" sort of property.

    Is this possible with variable-height boxes like this in CSS?

    Thanks
     
    looper, May 19, 2008 IP
  2. looper

    looper Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, a year and a half later, I fixed my own problem with the jquery script "masonry" . See here for the results.

    http://www.ianandwendy.com/our_trips.htm
     
    looper, Sep 9, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I might have used display: inline-block but with IE and Firefox2/K-meleon being bitchy about it, it might have been more code.
     
    Stomme poes, Sep 10, 2009 IP