PDA

View Full Version : image caption placement woes


justlikethecaptain
05-01-2009, 06:13 AM
I am positioning an image in a page of text, such that it is justified left and the text flows around it. I'd like to have a caption that sits below it, and whose text wraps to the width of the image.

The image is in the following div...

.innerbox {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
background-color: #fff;
text-align: left;
padding: 3px;
overflow: hidden;
margin: 3px;
}

which is itself in this div:

.outerbox {
float: left;
padding: 3px;
background-color: #FFF;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-family: sans-serif;
position: relative;
}

Now it would seem to me that the desired effect could be achieved by putting the caption in its own div right after the image in the .innerbox div, but for some reason whenever I do that the whole caption just sits to the right of the image and spills across the whole page. When I put a clear on the div it sits to the bottom of the image, but still spills across the whole page.

How can I get the caption to sit in its right place?

edbr
05-01-2009, 06:40 AM
you need a 'container div, then inside that make 2 float left divs and clear so image in the first, clear then the caption will sit under the image in div 2

justlikethecaptain
05-21-2009, 05:09 AM
That seems to work in dreamweaver, but as soon as I load the page in firefox the caption no longer wraps to the width of the image, but instead runs across the page in one single line.

Any ideas?

edbr
05-21-2009, 05:32 AM
code or url

justlikethecaptain
05-21-2009, 05:34 AM
.containerleft {
float: left;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
background-color: #FFF;
}
.imginner {
clear: both;
float: left;
}
.imgcaptioninner {
clear: both;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}

edbr
05-21-2009, 06:38 AM
add some widths, if you give a width px or % to the container then make the child divs 100% should do it