Forums

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

Home Forums CSS Floating Elements and Fluid Dynamic Height Layouts

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40104
    Noel Forte
    Participant

    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?

    #111135
    joshrives
    Member

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

    #111137
    pmac627
    Participant

    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.

    #111173
    Noel Forte
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.