右对齐div

Question

I am trying to align a div to the right but its only showing towards the bottom.

Issue

CSS:

.homeWrapper{
    padding: 12px;
    width:auto;
}
.content_inner{
    height: auto;
    background-color: #6c93b8;
    margin:12px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    clear:both;
}
.leftCol{
    display: inline-block;
    width:448px;
    background-color: red;
}
.rightCol{
    display: inline-block;
    width:430px;
    background-color: green;
    clear:both;
}

HTML:

    <div class="homeWrapper">
            <div class="content_inner">
                <h1><span class="color_red">Contact</span> Agrilife</h1>
                    <div class="leftCol">
                        {{ template:body }}
                    </div>
                    <div class="rightCol">
                        text
                        text
                        text

                    </div>  
        </div>
    </div>  

Answer 1

Try using float

.leftCol{
    float:left;
    width:448px;
    background-color: red;
}
.rightCol{
    float:right;
    width:430px;
    background-color: green;
    clear:both;
}

Answer 2

Use float:right; with .rightCol