Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to float images, Pinterest style?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #40674
    supraicer69
    Member

    Fixed – can remove, sorry.

    I’m building a site whereby the images are using a cycle.

    Issue #1: There are 3 images x 2 rows.
    The second row of images are supposed to sit directly under the first row, to fill the gaps just like a pinterest style float.

    I’ve tried floating left and clearing left but it just won’t do it.

    Any ideas?

    Anything else you pick up that could be done better, feel free to comment. Thanks!

    #113614
    TheDoc
    Member

    What you’re looking for is Masonry! It’s an incredible jQuery plugin: http://masonry.desandro.com/

    #113615
    supraicer69
    Member

    Thanks TheDoc! I’m actually playing with it now :) awesome stuff. Just don’t know how to apply it exactly because of my current coding :( any pointers?

    #113616
    supraicer69
    Member

    Mainly which elements of my code to apply this to (obviously need to change the class or ID but unsure to what):
    `

    `

    #113617
    supraicer69
    Member

    This is what I have tried, unsure what I’ve done wrong or if it’s the CSS ruining it?

    #113619
    TheDoc
    Member

    The thread says [Solved], did you figure it out?

    Do you have a link to the site that you’re working on? Are you including jQuery? Are you making sure to include the Masonry script *after* jQuery? Lots of questions I could ask, but if you have a link somebody will be able to spot your error quite quickly!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.