Issue position text on page

[Michael_Burgess]

Hi there,

I'm trying to put the finishing touches to a web site and have run into some issues.

On this page (http://www.mnetuk.org/lbacreative/ronson.html) on my test site, I want the caption that reads:

"Part of a trade lighter campaign during the Centenary year, cover for duty free gifts brochure and leaflet cover for clothing accessories."

...to sit level with the bottom of the pictures on that page.

In order to try and achieve that I've wrapped the content area in a div (the blue part - made it blue so you can see where it is on the page) and the caption at the bottom is in its on div. I've set the vertical-align on the content div to bottom.

Two issues.

1. The height of the content wrapper div isn't stretching to the height of the images
2. Even if I explicitly set a height on the contentWrapper, the div with the caption in doesn't align with the bottom of the container, but just sits after the end of the last paragraph of text above.

Can anyone work out what I'm doing wrong - also, given that what I'm trying to achive is the caption lining up with the bottom of the images in a reliable fashion, does anyone have a good way to do this please?

If you need any more info please let me know.

Thanks in advance,
Michael.

[Michael_Burgess]

OK, so I've now got the wrapper (the bit I've made blue for illustration) to extend to the bottom of the images by floating the wrapper itself after reading somewhere that a floated container will stretch to accommodate its contents.

Next issue is how do I make the div with the text "Part of a trade lighter campaign during the......" sit flush with the bottom of the pictures (at the bottom of the blue?).

Thanks,
Michael.

[opifex]

some people hate to use clears, but when you float thing you have to clear the floats. and of course it's a good idea to define a width in nested divs.

#ronson #caption.ronson {
word-spacing: 0px;
letter-spacing: -1px;
line-height: 130%;
clear: right;
width: auto;
}

clear as indicated by the visual layout... might be left or both.

hope this helps

[Michael_Burgess]

Hi Opifex,

Thanks for the reply.

When I do that, I now get the following.......the caption sits under the pictures?

Someone on another forum says that getting that caption reliably sat between the pictures, with the bottom line of the caption lining up with the bottom of the pictures is impossible?

[Michael_Burgess]

Here's a screenshot to show the area where I'd like the text to sit:

http://www.mnetuk.org/lbacreative/Screenshot.JPG

I'd like the caption that's currently sat below the pictures to sit inside that gap I've drawn in red, but sit in that position reliably to begin with, despite slight fluctuations in paragraph sizes above between browsers.

Don't really want to have to redo the page with tables!

Thanks.

[opifex]

that was the position in the originial css.... without float and width.

[Michael_Burgess]

that was the position in the originial css.... without float and width.

Only based on a fluke that the paragraph spacing pushed the div to the right place I think.

If the text above is in its own div, do you know a way to place that caption between the pics?

Thanks.

[opifex]

guess i don't understand what you are looking for. i'll take a look later.

[Michael_Burgess]

guess i don't understand what you are looking for. i'll take a look later.

Cheers dude - appreciate it. Have annotated the picture I linked to also!