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

    ReputationRep:
    http://puu.sh/B59Y

    How would I go about tiling divs with irregular sizes so that they appear as above?
  2. Offline

    ReputationRep:
    Can't see your image.
  3. Offline

    ReputationRep:
    How about now?
  4. Offline

    ReputationRep:
    Use
    Code:
    position: absolute;
    left: *distance from left*;
    top: *distance from top*;
    for each tile
  5. 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.
  6. 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.
  7. Offline

    ReputationRep:
    Masonry (or one of its equivalents) is your only sane choice here.
  8. 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.
  9. Offline

    ReputationRep:
    <iframe> tags.


    This was posted from The Student Room's iPhone/iPad App
  10. 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.
  11. 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.
  12. 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?
  13. 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.
  14. 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
2015 general election
New on TSR

Lib Dem Norman Lamb on tuition fees

What do you think of his statement?

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