Results are out! Find what you need...fast. Get quick advice or join the chat
Hey there! Sign in to join this conversationNew here? Join for free

Tiling divs with irregular sizes

Announcements Posted on
    • Thread Starter
    • 0 followers
    Offline

    ReputationRep:
    http://puu.sh/B59Y

    How would I go about tiling divs with irregular sizes so that they appear as above?
    • 0 followers
    Offline

    ReputationRep:
    Can't see your image.
    • Thread Starter
    • 0 followers
    Offline

    ReputationRep:
    How about now?
    • 0 followers
    Offline

    ReputationRep:
    Use
    Code:
    position: absolute;
    left: *distance from left*;
    top: *distance from top*;
    for each tile
    • Thread Starter
    • 0 followers
    Offline

    ReputationRep:
    I can't do that for each tile, it's a dynamic website so when new tiles come in they will be out of place. I'm looking for an automatic way of doing it.
    • 0 followers
    Offline

    ReputationRep:
    A javascript solution like http://masonry.desandro.com/ (a jQuery plugin) would be your best bet. What you're trying to do isn't possible without javascript or some sort of server side script dynamically generating the styles.
    • 5 followers
    Offline

    ReputationRep:
    Masonry (or one of its equivalents) is your only sane choice here.
    • 4 followers
    Offline

    ReputationRep:
    (Original post by Rob801)
    A javascript solution like http://masonry.desandro.com/ (a jQuery plugin) would be your best bet. What you're trying to do isn't possible without javascript or some sort of server side script dynamically generating the styles.
    Dang, got there first.

    Adding to that, it would help if there's some regularity in your widths - they don't all have to be the same width, but preferably multiples of a reasonable number. That way, some can take up 1 column, some 2, etc. Have a look at the source here: http://masonry.desandro.com/demos/ba...ti-column.html

    I used the single-column version as part of a tumblr theme, but it looks ugly atm. Pinterest also has a similar system, only they made it themselves.

    You can just use CSS float, e.g. div{float:left}, but it leaves massive gaps.
    • 0 followers
    Offline

    ReputationRep:
    <iframe> tags.


    This was posted from The Student Room's iPhone/iPad App
    • 5 followers
    Offline

    ReputationRep:
    (Original post by RROD)
    <iframe> tags.


    This was posted from The Student Room's iPhone/iPad App
    I don't see that would help? Leaving aside the million issues with iframe, you're still left with the former issue of positioning them as required.
    • Thread Starter
    • 0 followers
    Offline

    ReputationRep:
    (Original post by cleverslacker)
    Dang, got there first.

    Adding to that, it would help if there's some regularity in your widths - they don't all have to be the same width, but preferably multiples of a reasonable number. That way, some can take up 1 column, some 2, etc. Have a look at the source here: http://masonry.desandro.com/demos/ba...ti-column.html

    I used the single-column version as part of a tumblr theme, but it looks ugly atm. Pinterest also has a similar system, only they made it themselves.

    You can just use CSS float, e.g. div{float:left}, but it leaves massive gaps.
    Yeah, I'm trying to do this for a tumblr theme also.
    • 4 followers
    Offline

    ReputationRep:
    (Original post by jordan.uni)
    Yeah, I'm trying to do this for a tumblr theme also.
    For me, it looks like it hasn't worked - it seems to be CSS float, with gaps. Need any help?
    • Thread Starter
    • 0 followers
    Offline

    ReputationRep:
    Oh, I managed to achieve what I wanted to achieve, the theme has since changed.

    Masonry worked perfectly for what I wanted, cheers guys.
    • 12 followers
    Offline

    ReputationRep:
    Could you not contain them all within larger divs?

Reply

Submit reply

Register

Thanks for posting! You just need to create an account in order to submit the post
  1. this can't be left blank
    that username has been taken, please choose another Forgotten your password?
  2. this can't be left blank
    this email is already registered. Forgotten your password?
  3. this can't be left blank

    6 characters or longer with both numbers and letters is safer

  4. this can't be left empty
    your full birthday is required
  1. By joining you agree to our Ts and Cs, privacy policy and site rules

  2. Slide to join now Processing…

Updated: July 4, 2012
New on TSR

The future of apprenticeships

Join the discussion in the apprenticeships hub!

Article updates
Useful resources
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.