The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Forcing thumbnails into a box

  • # October 6, 2009 at 2:33 pm

    I have a list of thumbnails generated from wordpress. They seem to overrun the box ( #thumb-list ) that contains them. I’ve been trying to get them to stack nicely inside a 500px box.

    The finished result would be a collection of thumbs 4 rows high and 4 columns wide. without having to use a scroll bar.

    Here’s the code I’ve got so far:

    #thumb-list { margin-left: 30px; max-height: 500px;}

    ul#thumb-list { display: block; width: 75px;}

    #thumb-list a.grid-product { display:block; height:120px; width: 85px; }

    Here’s the site:

    Any help is much appreciated!


    # October 6, 2009 at 2:40 pm

    First off, the code is way off. The following is very wrong:


    It should be:


    Once you have that fixed, you’ll simply need to float each of the <li>’s to the left. This will cause them to line up as you want them to.

    # October 6, 2009 at 2:53 pm

    You’re very right!

    Thanks for the help Doc!

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed