Thu, 2012-07-19 19:48
I have a floating container width an image and caption inside. I want the image to dictate the width of its container, and for the caption to wrap onto multiple lines if required. Is this possible without explicitly setting the width of the container itself?
See here for a little explanation/demo.
www.sigraham.com/CSS-text-wrapping.htm
Any help would be much appreciated, I'm new here!
Thanks.
Si.
//mod edit: A link must include the protocol token, "http://", else it will be taken as a relative address. Fixed. ~gt
Thu, 2012-07-19 22:18
#1
Table display
Set the floating container to {display: table;} and {width: 1px;}.
A table's explicit width is calculated as if a min-width. A table will always contain its content, and will expand as needed, and no more than needed.
IE7 will fail as it doesn't support {display: table;}, and MSFT removed width and height properties as hasLayout triggers. Oddly this leaves IE6 working with this fix and v7 broken. The zoom property should fix v7 by triggering it. But, who cares? 
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test document</title> <style type="text/css"> body { background-color: white; color: black; font: 100%/1.25 sans-serif; margin: 0; } p { font-size: 1em; } #wrapper { border: 1px solid black; margin: 20px auto; overflow: hidden; padding: 1em; width: 80%; } .person-container { border: 1px solid black; display: table; float: left; text-align: center; width: 1px; zoom: 1; } .person-container img { border: 1px dotted gray; display: block; margin: 2px; } </style> </head> <body> <div id="wrapper"> <div class="person-container"> <img src="/images/person-image.jpg" alt="[Photo of John Smith]" class="person-image" width="125" height="200" /> <span class="caption">John Smith, Managing Director</span> </div> </div> <!-- end wrapper --> </body> </html>
cheers,
gary