Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m at a loss

Thumbnail images going down, down, down

Dear Rachel,
Back to JavaScript the Missing Manual 7.3 if you now what I mean. What do I change in the CSS so the thumbnail images wrap up, rather than keep going down, down, down when I have a big gallery? I've tried several places with no success so far.

The thumbnails on this link aren't so bad, I have some pages coming with 15 images and that's when I need more control.

Thanks for your help.
1 person has
this question
  • Hi Kathleen,

    Thanks for writing us. I know how confusing it can be because there are always so many factors when it comes to markup + css + javascript.

    The issue here is the narrow fixed width on the gallery div.

    #gallery {
    width: 75px;

    If you make that div wider, the thumbnail imgs will no longer be in a long vertical line (because they are floated left, they'll line up side by side). But you still need to set a width, otherwise the gallery would float down below the sidebars. I think I would change the width and the padding to something like this (leaving the rest of the #gallery style rules as they are):

    #gallery {
    width: 780px;
    padding: 0 10px 40px 10px;

    With this change, a long gallery should look something like this:

    Are you using a tool like Firebug in Firefox or Web Inspector in Google Chrome? I find these tools to be invaluable because they let you analyze which rules are affecting each element on the page and they allow you to try out style changes in the browser. Here's what I see in Firebug when inspecting the #gallery div:

    That helped me to see where the width was coming from and try out some changes quickly.

    I hope this helps!

    Rachel James
  • (some HTML allowed)
    How does this make you feel?
    Add Image

    e.g. indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited kidding, amused, unsure, silly