CSS: div / image / text width

[jorgensen]

Hi there.....

First post :-)

I have read that it is oldtime to use tables as the main layout construction, therefore I give CSS / divs a go.

Things are going quite well, but I have this problem:

My site loads some pictures, of various sizes. They are placed inside a <div> with a 10 px border. Inside the <div> under the image, I have some text describing the image.

What I would like, is to get the width of the text to be the same as the image, but I can't figure out how ? I can set a fixed width for the text, but then it don't fits the image.

Does anyone have a tip to achieve this ?

Thanks

example:
http://www.rattenborg.com/download/20100417 css/css.jpg

[Trillium]

Well, you could probably put your text in a div, and then give it a fixed width.

Like so:


#main_contianer{
position:relative;
width:600px;
border:10px solid #ffffff;
}
#pic1{
position:relative;
width:200px;
height:200px;
}
.text{
position:relative;
width:200px;
}


<div id="main_container">
<img src="images/mypic.png" alt="A Lovely Picture" id="pic1" />
<div class="text">
Some text here.
</div>
</div>

Then I guess you could just play around with the positioning and margins.

Let me know if this works for you.