help me on css

[dina85]

Help me positioning three divs, next to each other? my code doesn't work.. why 'merah' div display after 'biru' div content. what's wrong with my code?

<div class="kuning">
Kuning
</div>

<div class="kelabu">
    <div class="hijau">
    Hijau
    </div>

    <div class="biru">
    Biru
    <br />
    sdaddfcdsf fdfdfdf dfdfsfsd fdfsdfs
    <br/>
    dadads dsdssssssssssssss sssssssssss
    <br />
    oooooooooooooooooooooooooooooooooooo
    </div>

    <div class="merah">
    merah
    </div>
</div>

<div class="purple">
purple
</div>






.kuning
{
background-color:#FF0;
height:50px;
width:300px;
}

.kelabu
{
background-color:#CCC;
height:300px;
}

.hijau {
background-color:#060;
float: left;
width: 250px;
display:inline;
height:100%;
}


.biru
{
background-color:#00F;
display:inline;
}


.merah {
background-color:#F00;
float: right;
width: 250px;
display:block;
height:100%;
}

.purple
{
clear: both;
background-color:#90F;
height:50px;
width:300px;
}

What are you expecting to look like? Attach a picture.