How to set the div must in the bottom using CSS?

Question

This is the div for my product, you can see the demo like this:

    <div class="productItem">
        <div>
              <!--image -->
        </div>
        <div>
              <!--text -->
        </div>
   </div>

http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg

Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.

Answer 1

It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?

You could also simplify your HTML using something like this:

<div class="productItem">
  <img class="large" />
  <p>Text</p>
</div>

This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.

Perhaps force the image to display above the text using the block attribute?

img {display:block;}

Answer 2

I must be missing something because this seems fairly simple.

<style type="text/css">
.productItem {
  text-align: center;
}

<div class="productItem">
  <img src="whatever"><br style="clear: both;" />
  Text
</div>

Perhaps there's more that I'm not understanding.

Answer 3

From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?

You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.

Answer 4

i assume you have a container for productItem

so it should be something like that:

<div class="productList">
<div class="productItem">
    <div>
         <!--image -->
    </div>
    <div class="productText">
         <!--text -->
    </div>
   </div>
<div class="productItem">
    <div>
         <!--image -->
    </div>
    <div class="productText">
         <!--text -->
    </div>
   </div>
</div>

i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).

This setting would not hurt anything and will work on all common modern browsers including ie6. All you need to do is give a different classname for product text or use different tag for addressing it.

css:

.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}

try this. should work perfectly

other solution is written above by MidnightLightining. using fixed height for image container.