1 reply [Last post]
s_d_graham
s_d_graham's picture
Offline
newbie
United Kingdom
Last seen: 10 years 10 weeks ago
United Kingdom
Timezone: GMT+1
Joined: 2012-07-19
Posts: 2
Points: 3

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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? Tongue

<!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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.