Question

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?

Answer 1

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;
}