Grow your CSS skills. Land your dream job.

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:

    Code:
    #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:
    [url]
    http://www.shinypropagandamachine.com/design[/url]

    Any help is much appreciated!

    Cheers,
    Brandon

    # October 6, 2009 at 2:40 pm

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

    Code:

    It should be:

    Code:

    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.

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