Como deixar uma li de uma lista sempre em baixo?

[Israel Elias 8]

galera tenho um lista de promoções e fiz essa lista em <ul> <li> veja em baixo:

 

 

só que eu queria, que a parte da li aonde tem o desenho veja a oferta em verde sempre fique colado em baixo veja um exemplo:

 

veja o codigo

CSS

#promotion-list{width:668px;height:auto;}/* background-color:; */
.promotion{width:668px;height:auto;padding:12px 0 12px 0;display:inline-block;border-bottom: 1px dotted #D1D1D1;z-index:9999;}
#promotion-list .promotion ul,#promotion-list .promotion ul li{width:539px;height:100%;display:inline-block;}/* background-color:; */
.bg-promotion{background:url(img/icons/bg-promotion.jpg) no-repeat;}

#promotion-list .promotion img{width: 119px;height:119px;margin-right:8px;border: 1px solid #D1D1D1;}
#promotion-list,#promotion-list .promotion img , #promotion-list .promotion ul,#promotion-list .promotion ul .info div{float:left;}
#promotion-list .promotion ul .info div{height: 16px;padding-right: 4px;padding-top: 5px;padding-left: 4px;font-size: 11px;color: #666;text-transform: uppercase;}
#promotion-list .promotion ul .info .address{border-right: 1px dotted #D1D1D1;z-index:9999;padding-left:0;}
#promotion-list .promotion ul .info .user-name span{background-position:0px -28px;width: 10px;height:13px;float:left;margin-right:3px;}
#promotion-list .promotion ul .info .address span{width: 8px;height:12px;background-position:-17px -28px;float:left;margin-right:3px;}

#promotion-list .promotion .title h2 a{font-size: 18px;color: black;text-decoration: none;text-transform: uppercase;}
#promotion-list .promotion .description{font-family: Tahoma, Arial, Verdana;font-size: 11px;line-height: 16px;color: #7F7F7F;padding-top:4px;}
.view-deal{padding-top:5px;}
.view-deal a{width:126px;height:24px;text-decoration:none;display:inline-block;}

 

HTML

                         <div id="promotion-list">
                                   <div class="promotion">
                                              <a href="#" title=""><img src="img/links/small/show_box_Untitled-5.jpg" width="119" height="119" alt="" title="" /></a>
                                              <ul>
                                                     <li class="title"><h2><a href="#" title="#">Titulo</a></h2></li>
                                                     <li class="info"><div class="address" ><span class="bg-promotion"></span>Brasilia-df</div><div class="user-name"><span class="bg-promotion"></span>Padaria_londe</div></li>
                                                     <li class="description"><p>Descrição da promoção </p></li>
                                                     <li class="view-deal"><a href="#" title="" class='bg-promotion'></a></li>
                                              </ul>
                                   </div>
</div>

[Marcos Xavier 189]

Tenta usar :

 

margin-bottom:0;

[Israel Elias 8]

Colocar margin-bottom:0; na <li> do desenho veja oferta??

pois coloquei e não de certo!

[Marcos Xavier 189]

Colocar margin-bottom:0; na <li> do desenho veja oferta??

pois coloquei e não de certo!

Posta o CSS do botão 'veja oferta'

[Wanderson Valerio 102]

Posta o código do teu botão.

[Israel Elias 8]

o codigo do botao

 

CSS

.bg-promotion{background:url(img/icons/bg-promotion.jpg) no-repeat;}/* para a img do fundo */
.promotion ul li{width:539px;height:100%;display:inline-block;}
.view-deal{padding-top:5px;}
.view-deal a{width:126px;height:24px;text-decoration:none;display:inline-block;}

 

 

HTML

<li class="view-deal"><a href="#" title="" class='bg-promotion'></a></li>

[Wanderson Valerio 102]

.view-deal{padding-top:5px; position: absolute; bottom: 0;}

[Israel Elias 8]

não deu certo =( o botão ficou la em cima do topo do site

[Marcos Xavier 189]

@Israel Elias.

Poste como está o html (apenas a parte que está na imagem postada)

[Israel Elias 8]

@Israel Elias.

Poste como está o html (apenas a parte que está na imagem postada)

 

Aqui está(apenas a parte que está na imagem postada)

<div class="promotion">
     <a href="#" title=""><img src="img/links/small/show_box_Untitled-5.jpg" width="119" height="119" alt="" title="" /></a>
     <ul>
           <li class="title"><h2><a href="#" title="#">Titulo</a></h2></li>
           <li class="info"><div class="address" ><span class="bg-promotion"></span>Brasilia-df</div><div class="user-name"><span class="bg-promotion"></span>Padaria_londe</div></li>
           <li class="description"><p>InauguradoIS </p></li>
           <li class="view-deal"><a href="#" title="" class='bg-promotion'></a></li>
   </ul>
</div>

[Wanderson Valerio 102]

div.promotion {
   position: relative;
}
.view-deal{padding-top:5px; position: absolute; bottom: 0;}

[Israel Elias 8]

Wanderson Valerio agora o botão apareçeu em cima aonde está escrito o titutlo titulo

[Wanderson Valerio 102]

div.promotion ul li {
   position: relative;
}
.view-deal{padding-top:5px; position: absolute; bottom: 0;}

[Marcos Xavier 189]

não deu certo =( o botão ficou la em cima do topo do site

Tenta fazer assim @ Israel

<div class="promotion">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<a href="#" title="" class="bg-promotion">Botao</a>
</div>

 

E no css:

 

.promotion{height:auto;.....continua..}
.promotion ul {height:auto;....continua.}