Right-align block elements in HTML

Question

I\'d like to right-align block elements in a floating container.

Assume the following markup.

Answer 1

use clearfix hack, this will help you to not to float bottom img next to top img. height width can be define as you wish

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.main_div {
    width: 100%;
    height: auto;
    float: left;
}
.big_img {
    float: right;
    width: 100px;
    height: 100px;
}
.small_img {
    float: right;
    width: 100px;
    height: 100px;
}

HTML

Here is the demo Fiddle