I have an element on this web page I'm developing where I need my text to conform to the width of an image above it - whose width will always be different - think of captions. I have found numerous references to using a 1px table to force this width sizing behaviour. I am having problems, though with Safari and Chrome "seeing" this instruction - the text ends up as a marginally sized text box sitting behind the image.

The problem, as I see it, has to do with the text and images sitting in div's nested within the table. I need the images to sit in a div because of some jquery script I'm using called cycle, which turns a group of images into a slideshow. The problem may have something to do with the script as well. In any case, I have tried a seeming infinite number of combination of floating left and clearing left on all all the divs, changing their positions and widths...nothing works. Anyone have any clues about how to broach this one?

EDIT 1: ok, should I be editing my post or responding with answers?

here's the url to see the problem I am having - http://friedmanstudios.ca/webdev/test8.html

and the code:

 <div id="content" class="boxes">
<table>
  <tr>
    <td >
    <div id="imageFrame"> <a href="#" class="img" title="_MG_9786_fmt.jpeg"> <img src="images/_MG_9786_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5169_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5169_fmt.jpeg"/> </a> <a href="#" class="img" title="IMG_5175_fmt.jpeg"> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/IMG_5175_fmt.jpeg"/> </a> <a href="#" class="img" title="aerial_fmt.jpeg" width=""> <img src="indesign export/GFA-TEARSHEETS-100526-01-web-images/aerial_fmt.jpeg"/> </a> </div>

      <div id="cycleCtrl">
        <div id="prev" class="pager"><a href="#">< Prev</a> </div>
        <div id="next" class="pager"><a href="#">Next ></a></div>
        <div id="pagerNav" class="pager"></div>
      </div>

      <div id="descController"> 

      <img src="images/arrow.gif" name="arrow" width="5" height="10" id="arrow" /> <span id="projectName">Toronto Centre for the Arts </span> <br />
        <div id="desc"> In the past eight years... 
        </div>
      </div></td>
    <td width="90%"><!--push col 1 back--></td>
  </tr>   
</table>

and the styles:

#content {
position: absolute;
top: 250px;
left: 275px;
float: left;
clear: both;

}

content table {

float: left;
width: 1px;

}

imageFrame {

position: relative;
float: left;
clear: left;
width: inherit;

}

desc {

position: relative;
clear: left;
float: left;

}

descController {

position:relative;
padding-top:5px;
padding-bottom:10px;
clear: left;
float: left;

}

descController div {

height:0; overflow:hidden; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; padding-top:10px; margin-top: 10px; word-spacing: 0em; line-height: 16px; font-size: 12px; position: relative; float: left; clear: left; }