Photo Gallery Styling the DIV

Begin with the DIV tag. Float the images to the left and be sure to supply a width; usually the width of the image plus a few extra pixels. You can also add some margin styling to add space around the top and bottom if you wish.

To give the images a more finished look, a background image, created in a graphics program, can be added. Some sample background images are at the bottom of this page or you can copy the ones used earlier in this week's lesson. Or, you can create your own. Be sure to set it to no-repeat so that the image will not repeat. Add a long caption and try it with and without the no-repeat to see what happens.

Resize this window. Notice that the images inside the DIV re-position themselves depending on the size of the window. This is called a liquid layout. If the DIV elements are placed inside another fixed-width container, they will remain in that position. This is referred to as a fixed-width layout. Since you're experimenting, you might want to try this to see what happens.