Problems with text wrap around captioned images

HTML & CSS
1

Hi All,

I’m having trouble getting the main text on my page to wrap around my images to which I have also included captions underneath. I want the captions to stay beneath the images. I have tried employing various attributes, like float: left or image=“right” to try and get around the problem, but although the image moves to its desired position and the main text wraps around it, the captions become separated from their images and are all over the place. My images and text are enclosed in div tags like so:

<div class="galleryphoto">
<img src="gallery/village/monuments/fountain.jpg" class="feature1"width="280" height="215" alt="16th century stone water fountain and trough."/>
</div>

Is there any way around this?

2

Without seeing your CSS for div.galleryphoto it’s hard to tell what’s going on. Have you set a width for the div? Here’s an example of what I use, and the caption stays under the photo with the other text wrapping around both:

The HTML:

<div class="floatleft" style="width: 300px">
    <img src="images/test.jpg" alt="images/test.jpg"
    width="300" height="100"> 
    <p class="caption">
        The caption text
    </p>
 </div>

The CSS:

div.floatleft {
    float: left;
    margin: 0 1em 0 0;
    padding: .5em 0 .25em
}
p.caption {
    font-style: italic;
    padding: .25em .5em;
    text-align: left
}

The div width can be declared in the CSS, but if I have a lot of photos with different widths I find it more convenient to use style=“width: xxxpx” within the div tag of the HTML for each photo. If the photo has a border, adjust the div width accordingly.

I’m no expert at this, but I find that the above works reliably for me. Good luck,

Ned

3

Thanks for your reply. No, I don’t have a working link as I am working it through on the dummy site first.

I’ve tried the float element practically everywhere, and in different combinations with different things. The problem is not in trying to get the image to float right or left, but when the image does float, it loses the captioned text. So what you are left with is an image with no captioned text below it because it was left behind on the other side of the page when obeying the float command. And this is the problem. Without the captioned text, everything would be fine, but because I want the captioned text, I am having this problem in getting the caption to stick with the image and go with it on the page where ever I decide to place the image.

The other comment you made about using a “captions tag” is a no go as I have already discovered that picture caption elements do not exist in XHTML. Having said that, though there is such a thing as a caption element, that element is not meant to be used for the purpose of picture captioning the way I would like; rather, it is meant specifically for the captioning of tables.

The way I was taught to caption pictures is by using the following method which includes the text within the div tags (sorry, perhaps last html code example was not very clear):

<div class="galleryphoto">
<img src="gallery/frigiliana pueblo/views/frigi_from_lane.jpg" width="300" height="220" alt="A view of a glistening, whitewashed Frigiliana in the Spanish sun." /><p>A view of a glistening, whitewashed Frigiliana in the Spanish sun.</p>
</div>

I’ve tried other ways of doing it, like using class selectors for example (which you can see from first html code provided). None seem to work.

4

Below you’ll find a full html page.

Have a look at it but I believe you’ll have yourself a working version of what you’re needing!

:slight_smile:

There is a .txt file of this attached as well.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floated Picture with Caption</title>

<style type="text/css">

body { margin:0; padding:0; }
#wrapper { height:100%; width:960px; margin: 0 auto; }
.galleryphoto { height:320px; width:225px; border: 1px solid #ff0000; float:left; margin:5px; padding:5px; }
.galleryphoto img { height:300px; width:220px; margin:2px; border:1px solid #000; }

</style>

</head>

<body>
	<div id="wrapper">
		
		<div class="galleryphoto">
			<img width="300" height="220" alt="THE PICTURE" />
			<p>the caption</p>
		</div>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis rutrum adipiscing. Nunc adipiscing, neque vel laoreet porttitor, purus elit fringilla nibh; consequat congue eros urna sed enim? Mauris congue bibendum justo, quis vulputate justo porta et. Aliquam erat volutpat. Sed elementum nulla nec nulla hendrerit sit amet congue arcu hendrerit. Pellentesque est odio, cursus sed vehicula vitae; pulvinar id augue. Sed fermentum, justo at tincidunt rutrum, orci enim cursus nisi, sit amet molestie libero mi et augue. Sed bibendum, libero a commodo placerat, nibh augue egestas tortor, vitae bibendum lectus risus quis odio. Aenean gravida, ipsum sed iaculis faucibus, dui turpis euismod magna, eget elementum mi nibh eu nulla. Donec ultrices aliquet leo, a lobortis dui fringilla at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla a ligula felis, eget tristique lectus. Aenean tristique libero consectetur ante accumsan non gravida neque malesuada. Quisque ut porta felis? Ut molestie, nisi eget auctor feugiat, eros eros lobortis dui, at condimentum erat tortor at ipsum. Aliquam consectetur, neque a tempus pretium, sem nunc accumsan tortor, et egestas metus sapien id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ante magna, accumsan non sollicitudin a, egestas ac urna. Quisque purus lectus, malesuada in ornare sed, feugiat gravida felis.</p>
	
		<p>Sed pellentesque leo quis urna porta eget sagittis nulla malesuada. Nunc facilisis erat sit amet ipsum mattis id ultricies felis luctus. Quisque feugiat lorem vitae enim feugiat quis volutpat enim molestie. Etiam accumsan, purus ac rhoncus ultricies, magna urna scelerisque neque, in facilisis odio neque quis erat. Suspendisse potenti. Mauris mollis risus at nibh consectetur convallis interdum elit vehicula. Duis a sem risus. Nam quis turpis augue. Sed eleifend gravida dolor vitae faucibus. Nulla ut porttitor est. Nunc libero quam, porta ultrices pulvinar quis, semper eu tortor. Aliquam quam lorem, dapibus et cursus eget, dignissim fermentum nisi. Ut eu sagittis augue. Mauris magna mi, pharetra mattis eleifend faucibus, fringilla vel ipsum. Curabitur faucibus ullamcorper ultrices. Nam aliquet, velit id mattis lobortis, nibh sapien pharetra neque, sed faucibus arcu ligula et mauris. Vestibulum condimentum auctor mollis. Nulla facilisi.</p>
		
	</div>
</body>
</html>
5

Do you have a working link?

Also, are you applying the float to the div.galleryphoto or to the img? And, are you using the caption tag for the captions or somehow dynamically getting the alt attribute or what?

6

Here’s a follow-up after I noticed you had attached a TXT file with the HTML and CSS. You have a width-height discrepancy. Your CSS says the img is 220px wide and 300px high, but your HTML has the img 300px wide and 220px high. I haven’t plugged that into my authoring program to see what the effect would be with different browsers, but I’ll bet there would be a conflict of some sort.

Ned

7

Thank you all so much for all your help. I’ve been working on this thing since you all responded with the helpful advice. and i’ve finally got it to work the way i would like.

ok_hornet, in the end i didn’t use your markup as it was giving me some trouble and i found it a little difficult to work with. sorry! tell me if i am wrong, but i found that your markup didn’t allow me the flexibility of applying different styles, formats, positions, etc. to the photos to be displayed on the page. i needed to have flexibility with this as some of my images need to be displayed in different ways. for example, i want to display photos in landscape, portrait and panoramic and each of these with different and specific parameters, so i needed to be able to do that easily.

Consequently, I found recce101’s suggestion much more practical and useful to my needs, though I could see how your markup would work, as well but not necessarily in this particular application. Perhaps it could be done your way as well, but i just found recce101’s to be a lot easier to work with.

I’ve only tried it on a couple of images and I’m still working through the dummy site but I think I’ve got it cracked more or less. Thanks again to everyone for all your help. Greatly appreciated indeed.