Full height Right div

Question

i want my div to be of 100% height

HTML & CSS codes

HTML

<div>
    <div class="content-box news-box" style="float: right">news section</div>
    <div class="content-box slider-box" style="height: 150px;">slider box</div>
    <div class="content-box plan-box">plan box</div>
    <div class="clr"></div>
</div>

CSS

.content-box{
    background-color: #d54515;
    border-radius: 2px;
}

.news-box{
    width: 19.5%;
    height: 100%;
}

.slider-box{
    width: 79%;
}

.plan-box{
    width: 79%;
    margin-top: 20px;
}

Answer 1

Add position:absolute; right:0 to .news-box and position:relative to parent div

Remove floats

 .wrapper{
    border:solid green 1px;
    position:relative
 }
 .content-box{
    background-color: #d54515;
    border-radius: 2px;
    height: height: 100%;
 }
 .news-box{
    width: 19.5%;
    height: 100%;   
    position:absolute;
    right:0    
 }
 .slider-box{
    width: 79%; 
 }
 .plan-box{
    width: 79%;
    margin-top: 20px;
 }

DEMO

Answer 2

Just add a Height on your div container :

<div class="container">
    <div class="content-box news-box" style="float: right">news section</div>
    <div class="content-box slider-box" style="height: 150px;">slider box</div>
    <div class="content-box plan-box">plan box</div>
    <div class="clr"></div>
</div>

And CSS Code :

.content-box{
    background-color: #d54515;
    border-radius: 2px;
    border: 1px #000 solid;
}

.container{
    height: 200px;    
}

.news-box{
    width: 19.5%;
    height: 100%;
}

.slider-box{
    width: 79%;
}

.plan-box{
    width: 79%;
    margin-top: 20px;
}

Demo : http://jsfiddle.net/xkZ49/