Results are out! Find what you need...fast. Get quick advice or join the chat
x

Unlock these great extras with your FREE membership

  • One-on-one advice about results day and Clearing
  • Free access to our personal statement wizard
  • Customise TSR to suit how you want to use it

Tiling divs with irregular sizes

Announcements Posted on
Find your uni forum to get talking to other applicants, existing students and your future course-mates 27-07-2015
Win top prizes in our mega results day giveaway... 24-07-2015
  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
TSR Support Team

We have a brilliant team of more than 60 Support Team members looking after discussions on The Student Room, helping to make it a fun, safe and useful place to hang out.

Poll
Do you think you'll do better or worse than your predicted grades?
New on TSR

Results are coming...

No sweat. Here's all you need to make sure you're ready

Useful resources
x

Think you'll be in clearing or adjustment?

Hear direct from unis that want to talk to you

Get email alerts for university course places that match your subjects and grades. Just let us know what you're studying.

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