Forum Moderators: not2easy
<div style="float:right" id="A" >
<img src="wherever.png" alt="" id="B" />
<p class="caption" id="C" >
This caption text should wrap only as wide
as the image. i.e. I would like the box width
of this p element to be set by the calculated
box width of the div.
</p>
</div>
I think it's impossible -which is really annoying.
I saw a similar posting here "CSS for image and caption displays [webmasterworld.com]". However that posting didn't answer my query because it just concluded that you should manually set the width of everything as you go. I'm looking for a flexible css solution...if there is one!
ie.
A.width calculated from B.width ONLY,
C.width calculated from A.width.
anyone help?
[edited by: SuzyUK at 3:34 pm (utc) on Oct. 14, 2005]
[edit reason] linked referenced thread [/edit]
I would like the box width
of this p element to be set by the calculated
box width of the div.
The code you've used is forcing this to function in the exact opposite way: by floating an element but not specifying a width, you trigger a behavior called "shrinkwrapping," where the calculated width of the float is determined by the width of the content. Since the <p> doesn't have an explicit width, either, it's width is calculated by normal width calculations (available space minus margin/padding/border) and then this calculated width is used to set the width of the float.
This is precisely why the float specs [w3.org] say...
A floated box must have an explicit width
...and why the other threads you've seen on the topic invariably conclude that the solution is to add an explicit width to the div (or the <p>).
My best advise is to investigate scripting methods (server- or client-side) that will allow you to dynamically set a width on the div once the dimensions of the image are known.
cEM
thanks for your reassurance.
rich
