css get floating divs to stack vertically

Question

Is it possible to get right float div's to always 'stack up' under each other?

For example I am trying to do something like this:

> ---------------------------------+
> |Container div           |   div1|
> |Fixed width             +--+----+ 
> |                           |div2|
> |                      +----+----+
> |                      |     div3|
> |                      +---------+
> |                                |
> +--------------------------------+

Div1, 2, and 3 are variable width and height. If I just float them all right, they won't always stack up like that, sometimes div2 will be put to the left of div1 etc. because the layout tries to minimise the height of the container. I would like them to always stack up under each other.

Answer 1

These css rules should put them on right aligned and stacked

.div1, .div2, .div3{
    float: right;
    clear: right;
}

See example fiddle.

Screenshot

Source

.div1, .div2, .div3{
    float:right;
    clear:right;
}
.div2{
    background-color:green;
    width: 300px;
    height: 20px;
}
.div1{
    background-color:blue;
    width: 100px;
    height: 30px;
}
.div3{
    background-color:red;
    width: 80px;
    height: 40px;
}

.container{
    background-color: gray;
    width: 400px;
    height: 400px;
}