Blok (box) pro fotografie s různými šířkami, jak na to?

Předem děkuji za rady, jedná se mi o to, zda a jak jde vytvořit blok (box) na fotografie, který by se přizpůsoboval jejím šířkám tak, aby do bloku vpravo od fotografie se dali umisťovat popisky. Na richardpesek.com/ukazka/ jsou obrázky jak by měl výsledek vypadat (hlavně se jedná o popisky aby seděly vpravo nahoře u fotek s různými rozměry). Ještě jednou díky za odpovědi.

Na tohle nepotřebuješ dávat fotku do bloku, ale fotku bude floatovat textový popis.
Díky, ale potíž mi to nevyřešilo, zkoušel jsem to všemožně, založím nové téma a dám tam i kód, ta galerie je převzatá a používá javascript, možná je to v tom...

Tak tu je HTML

<div id="slideshow">

	<div id="previewPane">

    <div id="largeImageCaption">Toto je obrázek číslo 1</div>

		  <img src="images/objekt/1.jpg">

		<span id="waitMessage">Nahrávám obrázek</span>	

	</div>

	

    <div id="arrow_right"><img src="images/arrow_right.gif"></div>

		<div id="arrow_left"><img src="images/arrow_left.gif"></div>

	<div id="galleryContainer">

    

		<div id="theImages">

				<!-- Thumbnails -->

				<a href="#" onclick="showPreview('images/objekt/1.jpg','1');return false"><img src="images/objekt/1t.jpg"></a>		

				<a href="#" onclick="showPreview('images/objekt/2.jpg','2');return false"><img src="images/objekt/2t.jpg"></a>	

				<a href="#" onclick="showPreview('images/objekt/3.jpg','3');return false"><img src="images/objekt/3t.jpg"></a>		

				<a href="#" onclick="showPreview('images/objekt/4.jpg','4');return false"><img src="images/objekt/4t.jpg"></a>		

				<a href="#" onclick="showPreview('images/objekt/5.jpg','5');return false"><img src="images/objekt/5t.jpg"></a>		

				<a href="#" onclick="showPreview('images/objekt/6.jpg','6');return false"><img src="images/objekt/6t.jpg"></a>		

				<a href="#" onclick="showPreview('images/objekt/7.jpg','7');return false"><img src="images/objekt/7t.jpg"></a>		

				<a href="#" onclick="showPreview('images/objekt/8.jpg','8');return false"><img src="images/objekt/8t.jpg"></a>	

				<!-- End thumbnails -->

				

				<!-- Image captions -->	

				<div class="imageCaption">Toto je obrázek číslo 1</div>

				<div class="imageCaption">Toto je obrázek číslo 2</div>

				<div class="imageCaption">Toto je obrázek číslo 3</div>

				<div class="imageCaption">Toto je obrázek číslo 4</div>

				<div class="imageCaption">Toto je obrázek číslo 5</div>

				<div class="imageCaption">Toto je obrázek číslo 6</div>

				<div class="imageCaption">Toto je obrázek číslo 7</div>

				<div class="imageCaption">Toto je obrázek číslo 8</div>

				<!-- End image captions -->

				

				<div id="slideEnd"></div>

		</div>



</div>

<div id="slideshow">
<div id="previewPane">
<div id="largeImageCaption">Toto je obrázek číslo 1</div>
<img src="images/objekt/1.jpg">
<span id="waitMessage">Nahrávám obrázek</span>
</div>

<div id="arrow_right"><img src="images/arrow_right.gif"></div>
<div id="arrow_left"><img src="images/arrow_left.gif"></div>
<div id="galleryContainer">

<div id="theImages">
<!-- Thumbnails -->
<a href="#" onclick="showPreview('images/objekt/1.jpg','1');return false"><img src="images/objekt/1t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/2.jpg','2');return false"><img src="images/objekt/2t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/3.jpg','3');return false"><img src="images/objekt/3t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/4.jpg','4');return false"><img src="images/objekt/4t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/5.jpg','5');return false"><img src="images/objekt/5t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/6.jpg','6');return false"><img src="images/objekt/6t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/7.jpg','7');return false"><img src="images/objekt/7t.jpg"></a>
<a href="#" onclick="showPreview('images/objekt/8.jpg','8');return false"><img src="images/objekt/8t.jpg"></a>
<!-- End thumbnails -->

<!-- Image captions -->
<div class="imageCaption">Toto je obrázek číslo 1</div>
<div class="imageCaption">Toto je obrázek číslo 2</div>
<div class="imageCaption">Toto je obrázek číslo 3</div>
<div class="imageCaption">Toto je obrázek číslo 4</div>
<div class="imageCaption">Toto je obrázek číslo 5</div>
<div class="imageCaption">Toto je obrázek číslo 6</div>
<div class="imageCaption">Toto je obrázek číslo 7</div>
<div class="imageCaption">Toto je obrázek číslo 8</div>
<!-- End image captions -->

<div id="slideEnd"></div>
</div>

</div>

A tu CSS (omlouvám se za ten chaos):

/* Content */
#slideshow {
width: 800px;
margin: 0 auto;
/* Total width of slideshow */
}
#previewPane {
min-width: 50%;
max-width: 100%;
margin-bottom: 10px;
text-align: left;
vertical-align: middle;
padding-top: 50px;
position: relative;
/* CSS HACK */
height: 332px;
/* IE 5.x */
height: 320px;
/* */
/**/
/* Other browsers */
height: 320px;
/**/
}
#previewPane img {
line-height: 400px;
}
#previewPane #largeImageCaption {
/* CSS styling of image caption below large image */
float: right;
text-align: left;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
/* Font to use */
font-size: 0.9em;
}
#galleryContainer {
width: 600px;
height: 104px;
/* Height of the images + 2 */
position: relative;
overflow: hidden;
/* CSS HACK */
height: 104px;
/* IE 5.x - Added 2 pixels for border left and right */
height
/* */
:
/**/
104px;
/* Other browsers */
height:
/**/
104px;
}
#arrow_left {
float: right;
z-index: 10;
background-color: #FFF;
padding: 1px;
padding-top: 25px;
}
#arrow_right {
float: right;
z-index: 10;
background-color: #FFF;
padding: 1px;
padding-top: 25px;
}
#theImages {
position: absolute;
height: 100px;
width: 100000px;
}
#theImages #slideEnd {
float: left;
}
#theImages img {
float: left;
padding: 1px;
cursor: pointer;
border: 0px;
}
#waitMessage {
display: none;
position: absolute;
left: 200px;
top: 150px;
background-color: #FFF;
border: 3px double #000;
padding: 4px;
color: #555;
font-size: 0.9em;
font-family: arial;
}
#theImages .imageCaption {
display: none;
}