Grow your CSS skills. Land your dream job.

Floating Elements and Fluid Dynamic Height Layouts

  • # October 1, 2012 at 10:04 pm

    Alright, so in order for this to make any sense, click [this link for an image](http://files.noelforte.com/files/fluid_layout.png “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?

    # October 1, 2012 at 11:07 pm

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

    # October 1, 2012 at 11:19 pm

    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.

    # October 2, 2012 at 5:57 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".