[jordan.uni]

http://puu.sh/B59Y

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

[Tycho]

Can't see your image.

[jordan.uni]

How about now?

[Jake9]

Use

position: absolute;
left: *distance from left*;
top: *distance from top*;

for each tile

[jordan.uni]

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.

[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.

[estel]

Masonry (or one of its equivalents) is your only sane choice here.

[cleverslacker]

(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.

[RROD]

<iframe> tags.


This was posted from The Student Room's iPhone/iPad App

[estel]

(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.

[jordan.uni]

(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.

[cleverslacker]

(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?

[jordan.uni]

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

Masonry worked perfectly for what I wanted, cheers guys.

[fran.ha]

Could you not contain them all within larger divs?