Dynamic floating divs height not following size of content within it

Hi all,

I have a page that shows the detail of some antique stock, and basically I have an area for a large image to the left, and three smaller images to the right.

What I want to happen is that if there is a longimage in there, the content below them will then sit below the image whatever the length of the image is.

This is the stock item that is causing the problem:

http://www.accendsandbox.co.uk/detail.php?stock_ID=89

Here is the code that is dealing with those images:


<div id="imgHolder">
<div id="hotel_Pic_Area_Middle">
<a href="#" class="showImg active" onmouseup="return Swap(this,'imgHolder');" >
<img src="./adminSallam/<?=$x['stock_Image']?>" alt="Antique <?=$x['stock_Name']?> For Sale" style="position:relative; border:#26120B solid 1px; max-width:530px; height:auto;" />
</a>
</div>
<div id="thumbImages">
	<div id="detailThumb">
	<div id="hotel_Pic_Area_Right_Pic_1">
	<a href="#" class="showImg active" onmouseup="return Swap(this,'imgHolder');">
	<img src="./adminSallam/<?=$x['stock_Image2']?>" width="140" height="105" border="0" />
	</a>
	</div></div>
	<div id="detailThumb"><div id="hotel_Pic_Area_Right_Pic_2">
	<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
	<img src="./adminSallam/<?=$x['stock_Image3']?>" width="140" height="105" border="0" />
	</a>
	</div></div>
	<div id="detailThumb"><div id="hotel_Pic_Area_Right_Pic_3">
	<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
	<img src="./adminSallam/<?=$x['stock_Image4']?>" width="140" height="105" border="0" />
	</a>
	</div></div>
</div>
<div style="position:relative; white-space:nowrap; display:inline-block; width:100%; clear:both">123</div>
</div>

and here is the CSS that is dealing with this lot:


#imgHolder {
    position:relative;
    padding: 0px;
    text-align:center;
    width: 100%;
    display:inline-block;
    height:auto;
}

#hotel_Pic_Area_Middle{
position:relative; width:530px; height:auto; margin-right:6px; float:left;
}

#thumbImages{
position:relative; float:right; min-height:380px; width:150px; background-color:#ffffff; margin-right:0px; padding-top:0px;
}

#detailThumb{
position:relative; margin-left:auto; margin-right:auto; width:140px; height:auto; margin-bottom:15px; border:#26120B solid 1px;
}


i just need that content below the images to always sit below the length of the large image, whatever the length of the image is.

I tried placing a div with clear:both everywhere that would normally work, and it doesnt seem to have any effect with it.

Cheers

I got it in the end guys, I had a class on one of the divs which was pushing it all out

Got that sorted, now all looking good.

Cheers

Sorry we missed your post but glad you got it sorted out in the end :slight_smile: