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;
}