[Solved] Can’t get image to the right…

[justbobf]

I’m trying to make a simple image gallery with some text below the bottom two images. All of the images are the same width, 208 px. I have given the images a left and top margin of 27 px and the gallery is enclosed in a div that is 500 px.

I put the last two images in div tags to keep the image and text that belongs to that image together and gave the div a width of 208 px. But, the last image refuses to move up and to the right; it always stays below the image above as if it were a block element or very wide.

Here is a link to the page:
http://www.ifaulkner.com/testCSS/pages/advertising/retail/RTAds3.html

Here is the relevant html:

Code:

Small space ads never looked so good. Or, sold product so well.

Shown here at 80% of actual size.

This is one of well-known canvas artist Brenda Hart’s designs.

See more ads  

And, the relevant CSS:

Code:

.ad {width: 208px; margin: 27px 0 0 27px; background-color:#99CC33;}
.text {margin-top: .75em;}
.caption {font-size: 80%;}

Tried floating left. Tried taking the image out of the div with the text and putting the text into two divs of their own. In that case the images appear next to each other, but the text does not. Sort of frustrating. I’m sure it is something rather simple…

[justbobf]

So, it looks like I can’t really make an "image gallery" where images just flow left to right and top to bottom as soon as I add text below an image. I made the image class and the div with the image and text the same name because I wanted each to have a top and right margin. Figured that would keep everything aligned. Giving each a different seems to result in the same problem. Then, I gave the class a width the same as the images, figuring that would keep the text constrained within the width of the image, like you might do with an image and caption. As soon as I did that, the last image and text div refused to go to the right. I still wonder why that is.

So, looks like I need to use an unordered list. Too bad, because it makes it more difficult to add an image anywhere in the gallery without re-writing the whole list.

I did change the anchors in the main nav bar, not the side nav bar, to display inline. When I do that with the side nav bar, it messes up in Safari. I can fix the side nav bar with the HTML code for IE7, if that is a problem.

Thank you all. (You know, I am not trying to be argumentative, here; just trying to understand.)

[justbobf]

Got it!

The secret is I have to add Display: Block and Float: Left to each "ad" class; then!, and this is the real key, I have to Clear the float with the first div that holds the image and the text. And then, of course, add a clear div after the last image and text to make the white page extent to the bottom of the page. Viola!

[Author]

Posts