Photo on left, caption on right

[dac1117]

Clicking on an image in this all-thumbs gallery (http://www.woodfiredceramics.net/gallery/2104868) displays this layout (http://www.woodfiredceramics.net/gallery/2104868/1/113802802/Small). Is there a way to display the photo-to-the-left and the caption-to-the-right? I would like the caption aligned to the top and just to the right of a (small-size) photo. Appreciate your help!

[Allen]

Clicking on an image in this all-thumbs gallery (http://www.woodfiredceramics.net/gallery/2104868) displays this layout (http://www.woodfiredceramics.net/gallery/2104868/1/113802802/Small). Is there a way to display the photo-to-the-left and the caption-to-the-right? I would like the caption aligned to the top and just to the right of a (small-size) photo. Appreciate your help!
This is as close as I could get. Needs a little tweaking and a
lot of experimenting. :D

.gallery_2104868 #mainPhoto {
float: left;
margin: 0 20px 40px 0;
}

.gallery_2104868 #caption_bottom {
float: right;
}

Wow, it still works when different sizes are clicked.

[dac1117]

This is as close as I could get. Needs a little tweaking and a
lot of experimenting. :D

.gallery_2104868 #mainPhoto {
float: left;
margin: 0 20px 40px 0;
}

.gallery_2104868 #caption_bottom {
float: right;
}

Wow, it still works when different sizes are clicked.

looking much better!

can I also hide the <prev ... next> nav controls and all the text/links (sizes, save photo, your preferred size) ? link (http://www.woodfiredceramics.net/gallery/2104868/1/114175999/Small)

Many thanks for your generous expertise on the forum!

[Allen]

looking much better!

can I also hide the <prev ... next> nav controls and all the text/links (sizes, save photo, your preferred size) ? link (http://www.woodfiredceramics.net/gallery/2104868/1/114175999/Small)

Many thanks for your generous expertise on the forum!
Try this.

.gallery_2104868 #sizePicker,
.gallery_2104868 #albumNav_bottom,
.gallery_2104868 #albumNav_top
{display: none;}

[oxy8384]

dac1117,
You might also want to add this to keep the next/previous under the photo, even when there's no caption:
.singleImage #albumNav_bottom {clear:both;}

As for the different layouts in the different browsers: I notice you used 'float: top' for the caption instead of 'float:right' as Allen suggested. 'top' is an invalid value for the float property, which is probably why it is ignored by IE. I would guess that changing that to 'float:right' will make all the browsers display similarly.

Finally, if you still want to get rid of the remaining next/previous stuff, you need to add the
.gallery_2104868 #albumNav_bottom {display: none;} that Allen mentioned.

Bill

[dac1117]

dac1117,
You might also want to add this to keep the next/previous under the photo, even when there's no caption:
.singleImage #albumNav_bottom {clear:both;}

As for the different layouts in the different browsers: I notice you used 'float: top' for the caption instead of 'float:right' as Allen suggested. 'top' is an invalid value for the float property, which is probably why it is ignored by IE. I would guess that changing that to 'float:right' will make all the browsers display similarly.

Finally, if you still want to get rid of the remaining next/previous stuff, you need to add the
.gallery_2104868 #albumNav_bottom {display: none;} that Allen mentioned.

Bill

Bill - thanks for your help

>>I would guess that changing that to 'float:right' will make all the browsers display similarly.<<

commenting out the #caption_bottom {
float: right; code improved the layout by moving the text next to the image but IE displays the caption at the bottom no matter what I do! Any ideas how to get IE to match FF display (http://www.woodfiredceramics.net/gallery/2104868/1/111640826/Small)? Btw, thanks for the '.singleImage #albumNav_bottom {clear:both;}' code - great suggestion!

[oxy8384]

dac1117,
You need to add this CSS back into your customization section, just as Allen suggested:
.gallery_2104868 #caption_bottom {
float: right;
}
Do not use anything other than 'left', 'right', or 'none' for the float property, as these are the only valid values. You had 'top' in there at one point which was messing you up.

Once you get the caption showing up to the right of the picture, we can work on moving it closer, if that's what you want to do. But you need that float code in there first...

Bill

[oxy8384]

It looks like (I can't believe I'm about to say this, BUT) IE was doing it right and FF was not...:huh:D:rolleyes

It turns out the #mainPhoto element you are float-ing to the left is not a sibling of #caption_bottom. #mainPhoto is actually a child of #photoWrapper which is, itself a child of #photos. So float-ing #mainPhoto should not have had the effect that it had in FF - unless I'm missing something...

Anyway, try this, instead. Remove this:

.gallery_2104868 #mainPhoto {
float: left;
}

and replace with:

.gallery_2104868 #photos {
float: left;
}

This should look more consistent between FF & IE and is the correct way to do what you're trying to do (I think), since #photos and #caption_bottom are siblings (i.e., they are at the same level in the page structure). If we still need to tweak the positioning of #caption_bottom, at least we'll be at the right level...

BTW, if you want to display all your galleries' single-image pages this same way, you could replace '.gallery_2104868' with '#singleImage'.

Bill

[dac1117]

It looks like (I can't believe I'm about to say this, BUT) IE was doing it right and FF was not...:huh:D:rolleyes

It turns out the #mainPhoto element you are float-ing to the left is not a sibling of #caption_bottom. #mainPhoto is actually a child of #photoWrapper which is, itself a child of #photos. So float-ing #mainPhoto should not have had the effect that it had in FF - unless I'm missing something...

Anyway, try this, instead. Remove this:

.gallery_2104868 #mainPhoto {
float: left;
}

and replace with:

.gallery_2104868 #photos {
float: left;
}

This should look more consistent between FF & IE and is the correct way to do what you're trying to do (I think), since #photos and #caption_bottom are siblings (i.e., they are at the same level in the page structure). If we still need to tweak the positioning of #caption_bottom, at least we'll be at the right level...

BTW, if you want to display all your galleries' single-image pages this same way, you could replace '.gallery_2104868' with '#singleImage'.

Bill

bill - really appreciate all your hard work on this! I never would have solved this without your help :barb

[oxy8384]

bill - really appreciate all your hard work on this! I never would have solved this without your help :barb
IE is still not cooperating:rolleyes, but I think I understand why:

re-add this to your CSS (I think we tried this earlier):

#singleImage .gallery_2104868 #caption_bottom {
float: left;
}

Alternatively, you might want to use float:right on the caption to push it to the right and then we can work to center your image within the lefthand side. Your call.

Bill

[oxy8384]

That was all wrong...sheesh.:rolleyes It seemed to work with the short captions, but the longer ones were not.

Instead of all that, try adding THIS to your CSS:

.gallery_2104868 #caption_bottom {
display: inline;
}

This should get the long captions to wrap around and under the picture...

Bill

P.S. FWIW, the problem seems to be that IE wants to display #photos and #caption_bottom only as rectangles (i.e., block elements). In order to get the text to wrap around the image, it seems IE wants the caption to NOT be a block element (i.e., it wants the caption to be inline). I think.