Topic: Contrain DIV Width to IMG Width (Page 1 of 1)

Please take a look at this.

I'm trying to eliminate the tables I had previously been using to create this effect. The only problem is that the caption DIV naturally wants to expand beyond the width of the IMG.

How can I constrain the width of the caption DIV to the width of the IMG? I don't want to hard-code the width of each and every caption DIV, nor their containing DIVs.

The more I think about it, the more impossible it seems ...

On a dutch forum we had a simular discussion about two div's who should have the same height. Here there was one menu and one content div. After some realy strange javascript and php scripts it turned out to be a very simple solution. Look at this site: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html .
Here the content is placed inside the menu. The menu grows with the content. So maybe you should try this:

.image{ 

width:X; height: Y; border-top:solid 2px #000000; border-left:solid 2px #000000; border-right: solid 2px #000000

}

.caption{

 font-size: small; border: solid 2px #000000 margin:Y 0 0 0; padding: 0.25em

}

followed with something like this:

<div class=caption>

<div class=content> 

<img alt="image" src="whatever.jpg" />

</div>  //end of content  div

caption text  caption text

</div>   //end of caption div

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Rinswind's solution seem to be the easiest (and best) one. It is also the same solution that w3c has demonstrated on their Tips and Tricks page.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

It looks like this would solve things if my problem were one DIV expanding to the size of the other DIV, but my problem is constraining the size of a DIV. I don't want the caption pushing beyond the width of the image and I can't manually define the width of every DIV on every page. (All the images have different widths.)

Am I missing something?

If you have PHP available you can do this easily.

basically you would use the getimagesize() function to return a variable containing the width of the image. We'll name the variable '$width'
Then in your caption div, call that variable in a style declaration -


<div class="caption" style="width:<? $width ?>;">

Other than that, I can't think of a pure HTML/CSS solution besides a table...

Of course, if you are hard coding the page and the image, it would be a simple matter to simply add the style="width:...;" part to the caption <div> to match the image's width anyway, especially since you need to type it for the <img> already....

[This message has been edited by DL-44 (edited 09-22-2003).]

[This message has been edited by DL-44 (edited 09-22-2003).]

Here is what i understood:
You want the caption width to be the same as the image width? right.
And the images are all a different size?
So you actually want the caption size to grow when the picture(width) is bigger?
And you want the caption to be smaller when the picture is smaller?

Then the above trick should work. This is the theory:
The outer (caption) has no size defined so it sets the size to auto or the "defined by content"
the content is another div with the picture on it. This inner (content) div has also no size defined and is thus "defined by content" which is your image. So the image defines it's own div and the caption div.
Now the only thing you need to do is playing with the margins and padding to get both layers right. The image div should fit into the caption div padding/margin. Then copy/past the two div code as many as you need, copy the pictures and text in it and you are ready to rock
But this is theory... i haven tried this trick yet . But i played with the above link and that one reacts on the size of content so it should work.

I'am very sorry if did not understand the question right , but i learned some good things on the way. Thanks for that



__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Rinswind: If I understoor you right your stylesheet/code would make the divs look like this:
<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>
/--------\

Veneficuz is right -- the outer DIV still isn't restricted. The caption will continue to grow beyond the width of the IMG without wrapping, no matter how you nest the DIVs.

Unfortunately, converting the whole site to PHP isn't an option right now, so it looks like I'm back to tables.

Thanks anyhow.

Ok now i see my mistake, stupid Trying to use a relative width does not help since that means relative to the containing div. Darn. Anyway it's pretty odd, when there is no width specified, the width (or height) will be defined by the content but if you specify a relative width it's defined by the containing element.....weird

__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

It seems weird when you're expecting it the other way, but think about it, usually you would expect it to be the way it is. For instance if you make a page with a main content DIV and set the div width to 85% you expect it to be 85% of the browser window, not 85% of however long its contents would be if they were unconstrained. Now THAT would be weird.

-jiblet

Instead of going back to tables why not just use the solution that DL proposed? Use an inline style to control the width of each div individually. It's not exactly the most elegant solution but it'll work.

:::11oh1:::

Well, technically I don't have to type the image width since I'm using HomeSite, but regardless, I hate hardcoding more than I need to anymore. I have a habit of forgetting to change something like that if I go in and replace the image.

Oh, maybe I'll consider it ...