Dynamic floating divs height not following size of content within it.

**multichild** · Jan 8, 2013 07:54

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:

Code:

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

Code:

#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