how to float images in a div

  • Resolved jackhenrie

    (@jackhenrie)


    13 years ago

    this is a very basic question i hope someone can help me with.
    i am trying to make my front page into an image gallery in which multiple images appear side by side in a flexible width div.
    i don’t want to use a table, but just want the images (with captions beneath) to run horizontally and break once they reach the right end of the div.
    i am editing the css sheet of the toolbox theme.
    at the moment i can’t get the images to appear side by side: they always break to the next line.
    can i fix this with a css specification?

    thanks!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • dan.tee

    (@dantee)

    13 years ago

    the thing you need is float. This is the way to make objects appear next to each other rather than vertically. A suggested way would be this:

    .image-holder {
    float:left;
    }
    Anything contained within class=”image-holder” will now stack up to the right of the object next to it until they reach the edge of the container that they’re in.

    Or you could add something like this:

    .the-name-of-your-flex-width-div img {
    float:left;
    }

    That way, any images inside your flexi div will float next to each other.

    Hope that helps. Oh, and never use tables for anything but tabular data.

    Thread Starter jackhenrie

    (@jackhenrie)

    13 years ago

    hey thanks! this works. i just had to find class that my theme was applying to the images…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘how to float images in a div’ is closed to new replies.