Div won’t stick to the bottom of its container

[pgacv2]

Hi!

I’m working on an online store with a section to display promotional products. Since the product list is being rendered by an ASP.NET DataList, all I can do is specify the HTML that will be inside each cell of the table generated by the DataList. As you can see in the attached image, not all the product images are the same size, so the "Buy now" button isn’t always aligned to the bottom of the cell as I’d like it to be. I’ve wrapped each physical line in a div (the name, image, price, and button each have their own div; I know, I shouldn’t catch div-itis) and tried to give the image div height:100% to push down the button, but that doesn’t work. I also tried giving the table cell height:100% so the div inside would have some point of reference to calculate its own 100% height, but that also didn’t work. Using position:absolute on the button div sends it flying off to a place higher up on the page, and using position:relative on the button divs and then trying to adjust their bottom property moves them all by the same amount, instead of aligning them to the edge of their parent container.

Basically, I want the product list to look as if each physical line has its own table row. (Making each div display:table-row didn’t help, either.) How can I just get the button to align to the bottom of the container? Thank you!

[attachment=0]products_table.gif[/attachment]

[TheDoc]

So if you were to do something like this, it wouldn’t work?

CSS:

Code:

.itemwrap {
position:relative;
}

.button {
position:relative;
bottom:0;
}

HTML:

Code:

Category/Title/Whatever

Your Button

[pgacv2]

Thanks for the reply, TheDoc.

It doesn’t work, no. I’m using Firefox 3.0.11 and an XHTML 1.0 Transitional doctype. Sorry I can’t provide a link, as I’m working on my local machine and frequently uploading any changes to the public site (thus overwriting what is already there).

I ended up wrapping the top two lines and the bottom two lines each in their own div, using the following CSS and HTML:

Code:

.topproducts {
width:90%;
}

.topproducts td {
padding:7px;
vertical-align:top;
text-align:center;
}

.title_and_image img {
height:110px;
margin-top:0.5em;
margin-bottom:0.5em;
}

.price_and_buynow {
margin-bottom:1em;
}

And inside each table cell goes the following:

Code:

Product title

$price

This forces all the product images to be 110px tall, which lets me predict where, in relation to the title and image, the price and button will appear. I just turned each table cell into two blocks. Not really elegant, and could run into some weird image resizing problems down the road (like having an image that’s maybe 100px wide and only 30px tall, resizing it to 100px tall would throw off the whole layout), but it works for now.

[Author]

Posts