We help IT Professionals succeed at work.

Keeping an image within a div

Rowby Goren
Rowby Goren asked
on
I think this is a float / clear float issue, which I don't have my brain quite wrapped around yet...

Please go to this page, work in progress :):

http://brentwoodvillagemarket.com/index.php?option=com_virtuemart&page=shop.browse&category_id=20&Itemid=80

Whenever there is an image for one of the sandwiches, I need to make sure that the bottom dotted border line has some nice padding after the product image -- if there is an image present..

As you can see, the image for the "Thanks A Lot" sandwich slightly overlaps the bottom dotted line border.  That's my problem .

The "Wise Guy" sandwich doesn't have this problem only because there is some text in the description of the sandwich.

And the sandwiches which do not have images appear to be behaving with nice padding, etc.

They are all within a container called  <div class="s5_browseProductContainer">

So, as I said,  I think the problem may have something to do with floats and clearing floats -- and maybe there needs to be some divs added or rearranged if necessary????

Below is the php code.  I promise not to touch it until you folks are finished here.

Thanks
Rowby
<div class="s5_browseProductContainer">
  <h2><?php echo $product_name ?>  </h2>
    <p ><?php echo $product_price ?></p>
 <div id="rowby-thumb"> <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?><br style="clear:both;" /><div align="center"></div>
   <br style="clear:both;" /></div> 
    <?php echo $product_desc ?>
  <?php echo $form_addtocart ?>
 </div>

Open in new window

Comment
Watch Question

Senior Systems Manager
Commented:
A float by definition floats above everything else so the clear doesn't help.

What if you tried this. use PHP to get the height of the image. Then add X number of pixels to that. Then use this for your DIV that defines the section:

http://www.w3schools.com/CSS/pr_dim_min-height.asp

Author

Commented:
Hi cmaohio,

All of the images are the same height so I tried adding minimum height.

However for the products where there are no images the div says the same height.  

You can see that here.  http://brentwoodvillagemarket.com/index.php?option=com_virtuemart&page=shop.browse&category_id=20&Itemid=80

I would like to only have those with images be that minimum height.

I realize this may be beyond css and may require some php...    Or is there still a solution in CSS?

Thanks

Rowby
cmaohioSenior Systems Manager

Commented:
Well, in the case where there is no image, then you can do an If/then statement in PHP which then omits the min-height directive within the tag itself. It requires you use the style tag within the div instead of in the .css file but it will solve your problem.

I don't exactly know if there is a CSS solution to it other than using a table (there are still uses for tables in design sometimes) or using a DD list.

Check out http://www.kofc11207.org/officers.php

Actually now that I think of it, that example above I have it variable height with the line in between. Although the line may be simply a DIV border. I don't remember, check the source.
Commented:
hi rowby

i took a look at your site to fix the problem with the images overlaying your border.
I got a solution wich works.

In your html you got to div's inside eachother,
outerdiv: class: none
               id: row_4c21654sdf (random charter or so
inner div: class: s 5_browserProductContianer
                id: none
(example in  code snippet below)

What did i do to make the image get in the correct way:
i addapted some css and removed the s_5_browserProductContainer div
i did the css inline, but you could create a class in your css sheet!

Change things that are indicated in the snippet below

Greetz!

<div style="margin-right: 5px; width:98%; float:left;border-bottom: 2px dotted #CCC;"id="row_4c16524e374a5"> <======= STYLE TO ADD(BORDER)
  <div class="s5_browseProductContainer">  <========= TO REMOVE
  	<h2>The Filet  </h2>
    	<p>
		<span class="productPrice">
			$7.50
		</span>
    	</p>
    	<div id="rowby-thumb">
		<img src="http://brentwoodvillagemarket.com/components/com_virtuemart/themes/s5_shopper_frenzy/images/rowby-no-product-image.gif" 00="" class="browseProductImage" border="0" title="The Filet" alt="The Filet">
		<br style="clear:both;">
		<div align="center">
		</div>
   		<br style="clear:both;">
    	</div> 
      
    	<form action="http://brentwoodvillagemarket.com/index.php" method="post" name="addtocart" id="addtocart7.5_3" class="addtocart_form" onsubmit="handleAddToCart( this.id );return false;">
    		<label for="quantity57" class="quantity_box">Quantity:&nbsp;</label><input type="text" class="inputboxquantity" size="4" id="quantity57" name="quantity[]" value="1">
		<input type="button" class="quantity_box_button quantity_box_button_up" onclick="var qty_el = document.getElementById('quantity57'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;">
		<input type="button" class="quantity_box_button quantity_box_button_down" onclick="var qty_el = document.getElementById('quantity57'); var qty = qty_el.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) qty_el.value--;return false;">
		<br>
		<input type="submit" class="addtocart_button" value="Add to Cart" title="Add to Cart">
    		<input type="hidden" name="category_id" value="20">
    		<input type="hidden" name="product_id" value="57">
    		<input type="hidden" name="prod_id[]" value="57">
    		<input type="hidden" name="page" value="shop.cart">
    		<input type="hidden" name="func" value="cartadd">
    		<input type="hidden" name="Itemid" value="80">
    		<input type="hidden" name="option" value="com_virtuemart">
    		<input type="hidden" name="set_price[]" value="">
    		<input type="hidden" name="adjust_price[]" value="">
    		<input type="hidden" name="master_product[]" value="">
    	</form>
    </div> <============= TO REMOVE
</div>

Open in new window

Author

Commented:
Hi, cresQ:

Thanks for helping.  I have to leave for today but will try your solution on Tuesday.

Stay tuned!!

Rowby
Hi Rowby,

This is a simple solution.

Your image is floating right. This float will drop just below the element that is located above it. In your case this is the paragraph that contains the price.

To fix, working on the div with ID: 'rowby-thumb', remove the negative margin and relocate the entire element above the <h2> tags and your problem will be cleanly solved (in theory). You should also remove the clears and the additional div that are present, all you should have in this 'rowby-thumb' container is the image.

I've not had chance to test this so please let me know how you get on.

Kind regards

Damien

Author

Commented:
Hi  everyone

Thanks for all your help.

Stay tuned. I will be finishing up this question today or thursday the latest.

Rowby
Great :o)

I just tested and it works although I have notioced something which will probably cause you problems; the ID:  'rowby-thumb' is repeated multiple times throughout the page. This is semantically incorrect and as I said, might cause an issue.

Author

Commented:
Thanks for your help.  I will be using a combination of your solutions to get it fixed.

If I run into problems I'll update it with a new question.

Wanted to get these points awarded while fine tune the site.

Rowby