How to put this a href in the bottom of the div

I have this code :

<div class="ultime_box">
    <div class="ultime_box_photo">
        Photo
    </div>
    
    <div class="ultime_text">
        <div class="ultime_box_title">
开发者_如何学运维            Title
        </div>
        
        <div class="ultime_box_description">
            Description
        </div>
        
        <a href="#" class="ultime_box_vai">link</a>
    </div>
    <div class="clear"><!--- --></div>
</div>

.ultime_box
{
    margin:15px 27px 35px 20px;
    color:#FFFFFF;
    font-size:13px;
    height:100px;
    background-color:#cdcccc;
}

.ultime_box_photo
{
    width:120px;
    margin-right:15px;
    float:left;
}

.ultime_text
{
    float:left;
    width:299px;
}

.ultime_box_title
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    text-transform:uppercase;
    line-height:12px;
    padding-bottom:13px;    
}

.ultime_box_description
{
    color:#FFFFFF;
    font-size:11px;
    line-height:13px;
    padding-bottom:13px;     
}

a.ultime_box_vai:link, a.ultime_box_vai:visited
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    line-height:12px;  
    text-decoration:none;
}

a.ultime_box_vai:hover 
{
    text-decoration:underline;
}

And I'd like to put the link in the bottom of the container div (ultime_box), without using height in the previous divs.

How can I do this?

Here's the solution: http://jsfiddle.net/N7GWV/1/

Give .ultime_box position: relative and your link position: absolute; bottom: 0.

.ultime_box
{
    margin:15px 27px 35px 20px;
    color:#FFFFFF;
    font-size:13px;
    height:100px;
    background-color:#cdcccc;
    position: relative;
}

a.ultime_box_vai:link, a.ultime_box_vai:visited
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    line-height:12px;  
    text-decoration:none;
    position: absolute;
    bottom: 0;
}

.ultime_text
{
    float:left;
    width:299px;
    position:relative;
}

a.ultime_box_vai:link, a.ultime_box_vai:visited
{
    color:#000000;
    font-weight:bold;
    font-size:12px;
    line-height:12px;  
    text-decoration:none;
    position:absolute;
    bottom:0px;
}

this should do what you need. Basically, it's all depending on the position attribute of the divs.

This quick guide should clean you out about it.

You could make your bottom link have this css:

a.bottomLink{
    float:left;
    width:100%;
}

As your container div height is dynamic (based on content), your bottom link will be on the bottom. If I understood, you want to place link on the bottom of ultime_box, so your html should look like:

<div class="ultime_box">
    <div class="ultime_box_photo">
        Photo
    </div>

    <div class="ultime_text">
        <div class="ultime_box_title">
            Title
        </div>

        <div class="ultime_box_description">
            Description
        </div>

        <a href="#" class="ultime_box_vai">link</a>
    </div>
    <div class="clear"><!--- --></div>
    <a href="#" class="bottomLink">bottom</a>
</div>