css - Is there a way to get a second line of text to fill vertically? -

i'm having bit of trouble getting various products line on site. of items have name long enough create second line of text, , when so, items still align top of text rather aligning top of each image. want use of empty space above each div fit second line of text, rather pushing picture down , aligning @ top. code i'm using create divs in loop within php:

<div class="new_prod_box">   <a href="details.html">     '.$title.'   </a>   <div class="new_prod_bg">     <a href="details.html">       <img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />     </a>    </div>   <a href="cart.php?action=add&id='.$id.'">     <u>add cart</u>   </a> </div> 

here's picture explaining mean: my website

here's rules in css:

.new_prod_box{ float:left; text-align:center; padding:10px; width:132px; height:180px; } .new_prod_box a{ padding:5px 0 5px 0; color:#b5b5b6; text-decoration:none; display:block;   } .new_prod_bg{ width:132px; height:119px; text-align:center; background:url(images/new_prod_box.gif) no-repeat center; position:relative;  } 

hmmm, if understand issue correctly, giving .new_prod_box > a:first-child (selects first, top-level <a> element inside .new_prod_box) defined height should give want. long height great enough fit 2 lines of text in it, it'll keep elements below in same position, still leaves space title break 2 lines.

if isn't you're looking for, let me know , i'll happy further!

(edit:) align single-line titles top of image (rather having whitespace between them), try method, think work.

first, modify html structure bit, add <span> inside of first <a> element:

<div class="new_prod_box">   <a href="details.html">     <span>       '.$title.'     </span>   </a>   <div class="new_prod_bg">     <a href="details.html">       <img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />     </a>    </div>   <a href="cart.php?action=add&id='.$id.'">     <u>add cart</u>   </a> </div> 

then, add/modify these styles in css:

.new_prod_box > a:first-child{    height: [tall enough 2 lines];    position:relative; } .new_prod_box > a:first-child span{    display:block;    position:absolute;    bottom:0;    left:0;    width:100%;    text-align:center; } 

which believe should give want. try out though, , let me know happens.