Re: [css-d] Fit to width
On 10/26/11 3:08 AM, Philip TAYLOR (Webmaster, Ret'd) wrote: I am looking for a technique that will allow me to generate a , the width of which is the width of its widest non-shrinkable immediate child element; the DIV will always be floated. [...] Sorry for the delay - I was out of commission yesterday! But I wonder if this helps at all? It does have limitations... http://thewebwiz.net/temp/fit-to-width/ -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fit to width
Jukka already presented a solution without the float, but with a css table.
In your setting, you wanted the floating div to have a shrink-to-fit
width (CSS2.1: 10.3.5) that equals to the width of the image, so the
width of the text without breaks must not become the preferred width
of the float.
I can't think of a good solution. You may position the p absolutely in
its static position (without top, left, ...) to take it out of the
float and reserve some vertical space for this block. By doing so, the
p cannot interfere with the shrink-to-fit calculation (but it would
overflow the float if a word becomes very long).
But that is of course just experimental and not possible in a complex layout.
Ingo
div { float: left;
background: blue; position: relative; padding: 5px 0 3em 0; } img {
width: 100px; height: 25px; background: yellow; display: block; } p {
position: absolute; background: fuchsia; margin: 0;
} http://satzansatz.de/img/semi404040.gif";> to the aid of the
party
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fit to width
26.10.2011 13:08, Philip TAYLOR (Webmaster, Ret'd) wrote:
I am looking for a technique that will allow me
to generate a , the width of which is the
width of its widest non-shrinkable immediate child
element; the DIV will always be floated.
[...]
The image has a natural width, which for most
images will be wider than the width of (say)
"party" in the caption that follows. But the following
paragraph is "shrinkable", in the sense that it has no
intrinsic width and could be as narrow as the longest
word therein (i.e., "party"). So I would like the text
in the caption paragraph to be forced to wrap to the width
of the image.
Most approaches (like just floating) tend to make the element as wide as
needed for the paragraph presented on one line if possible. That's
hardly suitable, and it's rather natural to want to let the image width
restrict the text width (unless the image width is fairly small).
And it seems that a table in HTML is the only fairly safe way of
achieving that.
> I do not want to use tables for reasons of
accessibility.
The impact of tables on accessibility has been greatly exaggerated,
especially in the case of simple table. In this case, it would be a
matter of a very simple table: a caption, one row, consisting of one
element. The magic is that the caption width will be set according to
the cell width, and there the cell contains just the image. You still
need CSS if you wish to make the caption text left-aligned (instead of
centered), for example.
So far, my experiments and research have drawn a blank;
even Jukka's otherwise most helpful page [1] does not
seem to address this desideratum.
[...]
[1] http://www.cs.tut.fi/~jkorpela/www/captions.html
The page mentions the single-cell table approach though not very
emphatically.
The approach can be simulated in CSS. The main problem with this is that
the properties needed are not universally supported; in particular old
versions of IE would be a problem.
.figure { display: table; }
.figure img { display: table-cell; }
.figcaption { display: table-caption; caption-side: bottom; }
Now is the time for all good men to come to the
aid of the party
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fit to width
I am looking for a technique that will allow me to generate a , the width of which is the width of its widest non-shrinkable immediate child element; the DIV will always be floated. For example, consider the following : http://...";> Now is the time for all good men to come to the aid of the party The image has a natural width, which for most images will be wider than the width of (say) "party" in the caption that follows. But the following paragraph is "shrinkable", in the sense that it has no intrinsic width and could be as narrow as the longest word therein (i.e., "party"). So I would like the text in the caption paragraph to be forced to wrap to the width of the image. I do not want to use tables for reasons of accessibility. So far, my experiments and research have drawn a blank; even Jukka's otherwise most helpful page [1] does not seem to address this desideratum. Can anyone advise, please ? Philip Taylor [1] http://www.cs.tut.fi/~jkorpela/www/captions.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
