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