CSS / HTML troubles... problems with aligning divs

[lilpete]

Hi Guys,

This one has got to be an easy question,.

The page is here: www.test.steptoes.co.uk
The problem is the 'On Sale' bit at the bottom of the page,
I want to be able to vertically align it to the bottom of that div,
so all the on sale prices line up horizontally.

Im sure there is an easy way, I have tried this:-

.onsaleitem { /*the div surrounding the items*/
position:relative;
float:left;
width:150px;
height:auto;
text-align:center;
padding:5px;
margin-top:auto;
margin-bottom:auto;
vertical-align:bottom;
}

And this:-
#onsaleindex { /* the div surrounding the item divs */
position:relative;
width:800px;
height:auto;
min-height:150px;
text-align:center;
vertical-align:bottom;
}

Any help is much appreciated.
Best regards,
Pete

[Beverleyh]

Unfortunately there is no vertical-align option on divs.

I believe you would need to use nested divs and set a fixed height on the one containing the image;

<div class="onsaleitem">
<div class="imagecontainer" style="height:250px;">
<a href="product-display_Art-W602_dGFibGU9cHJvZHVjdCZmaWVsZD1Db2RlMSZ2YWx1ZT1XNjAy.ghtml" title="Art Skyline"><img src="/product/thumbs/W602-Carbone.jpg" border="0" width="100" alt="Skyline" /></a>
</div>
<br />Sale Price: &pound;65
</div>

Or put the price in a div and position it absolutely to the botton of the outer onsaleitem div. Either way though, this will only work if a fixed height is specified either for the image or the onsaleitem div.

[lilpete]

Thanks for the reply, that makes sense, I will give that a go.
Its annoying as that page is dynamically created so when the sale items are just shoes there will be a big white space and I will have to change my CSS as and when...

Ahh well, I will find a way! thanks again!