Html div yerleştirme sorunu?

<style>
#header {
}

#body {
width: 1024px;
position: relative;
margin: auto;
background-color: skyblue;
}

#userpanel {
width: 200px;
min-height: 100px;
position: relative;
float:left;
background-color: teal;
}

#content {
width: 600px;
min-height: 100px;
position: relative;
float:left;
background-color: violet;
}

#friends {
width: 200px;
min-height: 100px;
position: relative;
float:left;
background-color: goldenrod;
}
</style>

<body>

<div id="header"></div>

<div id="body">
<div id="userpanel">
<span>userpanel</span>
</div>
<div id="content">
<span>content</span>
</div>
<div id="friends">
<span>friends</span>
</div>
</div>

<div id="footer"></div>

</body>

userpanel,content,friends divleri body divinin içinde olaması gerekiyor ama öğeyi denetle kısmında body div'nin yüksekliği 0 px olarak gözüküyor..
bu sorunu daha öncede yaşadım birşeyler yaparak düzelttim ancak şuan nedenini öğrenmek istiyorum. Yardımcı olanlara şimdiden teşekkür ederim..