SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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

  2. #2
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by multichild View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •