css - float & align to the bottom of an element

Question

How can I align at the same time: float:right elements B & C next to element A, and align element B to the bottom of element A, and element C to the top:

When I add the float to elements B & C, these two elements are aligned to the top of element A, what I want is shown on the next image:

PS: element A doesnt have a fixed size.

Answer 1

I do not think that this can be done with floats. I would try nesting div C and B within A, and then positioning them absolutely in relation to A.

So something like this:

HTML

<div class="a">a
    <div class="b">b</div>
    <div class="c">c</div>
</div>

CSS

.a {
    margin-left: 60px;
    position: relative;
}
.b, .c {
    position: absolute;
    left: -60px;
}
.b {
     bottom: 0;
}
.c {
     top: 0;
}

See jsfiddle example.

Answer 2

HTML

<div class="elementA">A
    <div class="elementB">B</div>
    <div class="elementC">C</div>
</div>

CSS

.elementA{
    width: 400px;
    height: 50%;
    position: relative;
    margin: 0 0 0 200px;
    background-color: #000;
}
.elementB{
    width: 200px;
    height: 150px;
    position: absolute;
    top: 0;
    left: -200px;
    background-color: #eeeeee;
}
.elementC{
    width: 200px;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: -200px;
    background-color: #dddddd;
}

You can also set the hight of element A in %. Hope thats what you're after. Fiddle Link

Answer 3

In case you can use JQuery and not only CSS this can do the trick:

example

You can calculate the height of each element dynamically and then add a top-margin to element b.

element b margin top = height of a - (height of b + height of c) 

HTML

<div class="a">A</div>
<div class="left-column">
    <div class="c">C</div><br />
    <div class="b">B</div><br />
</div>

JQuery

$(function(){
    var ah = $('div.a').height();
    var bh = $('div.b').height();
    var ch = $('div.c').height();
    $('div.b').css('margin-top',ah-bh-ch + 'px');
});

CSS

.left-column{
    float: right;
}

.a{
    float: right;
    width: 300px;
    height: 400px;
    background-color: #7E0C89;
    color: white;
    font-size: 30px;
}

.b{
    margin-right: 5px;
    float: right;
    width: 100px;
    height: 100px;
    background-color: #F4CBF7;
    color: white;
    font-size: 30px;
}

.c{  
    margin-right: 5px;
    float: right;
    width: 100px;
    height: 100px;
    background-color: #BF72E9;
    color: white;
    font-size: 30px;
}