treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Floating Elements and Fluid Dynamic Height Layouts

  • Alright, so in order for this to make any sense, click this link for an image to get a sense of what I'm talking about.

    Basically this is for my portfolio page, which at the moment I'm trying to compact into a smaller more efficient layout, where people don't have to keep scrolling and scrolling to get to what they want. I'm trying to work out how to float my bite-sized portfolio items so that they fall neatly into columns, but can still have differing heights as indicated by the image above, as I don't really have a set length for each "post excerpt". Ideas on how I can get everything to line up?

  • I believe this is what you'll need http://masonry.desandro.com/

  • First, can you codepen.io it so people can work with it.

    Second, get rid of the height property to make the height dynamic for each box.

    Third, if you make 3 columns with divs and give them:

      vertical-align: top;
    

    You can get each to come immediately after each other.

  • Thanks for the tips! I'll try these out and let you know what I come up with. It might also go on Codepen.