Grow your CSS skills. Land your dream job.

Making a home page with scattered divs

  • # June 15, 2013 at 7:30 am

    Hi, I have been asked to make a website and part of the design brief is that the home page has boxes scattered over the page for their latest work or posts.
    The problem I am having is that they want the boxes to be dynamic so they want the sizes of the boxes to change weather it be a portrait picture or a video with text or whatever.
    For that I was going to just use absolute positioning and then make sure they could never overlap with any combinations of photo or video boxes.
    Trouble is they would also like to be able to position the boxes themselves within a grid.
    What would be the best way to go about this? I am guessing javascript but is there any pre scripts around that will save me making one (its not in the budget). Or any ideas how I can achieve this?

    Any help is much appreciated
    Thanks
    Matt

    # June 15, 2013 at 8:13 am

    Is this something you’re looking for? http://desandro.com/packery/draggable.html

    GMB
    # June 15, 2013 at 12:53 pm

    That’s pretty darn tootin’!

    # June 16, 2013 at 11:00 am

    Thanks for the replies. I am not sure that would work because they want to position them exactly, depending on the background image. Also I am building this on wordpress so I would have to make it work for that.
    [This ](http://www.trick-tips.com/wp-content/uploads/2013/06/Home.jpg “This”)is my design brief, so all those scattared divs would need to never overlap, no matter what was in them, and preferably be moved about in a grid.

    Thanks
    Matt

    # June 16, 2013 at 5:19 pm

    > Trouble is they would also like to be able to position the boxes themselves within a grid.

    That is major trouble and would involve an *incredible* amount of customization in WordPress.

    There was a link to a grid layout that was completely random that I saw the other day but I can’t find the link to it anymore. I think Masonry (and Isotope/Packery) rely on strict grid structure, but it looks like your design is going for a ‘scattered’ approach (as you mention).

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

You must be logged in to reply to this topic.

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