用jquery.js计算不出高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title></title>
<script src="./include/jquery.js" type="text/javascript"></script>
<script>function init()
{
alert($("#center").height());
alert($("#bottom").height());
}
</script>
<style>
#center
{
margin: 0 auto;
width: 800px;
text-align: center;
}
#left
{
float: left;
width: 50%;
}
#right
{
float: left;
width: 50%;
}#bottom
{
margin: 0 auto;
width: 800px;
text-align: center;
display: block;
clear: both;
float: none;
}
</style></head><body onload="init();">
<div id="center">
<div id="left">a1</div>
<div id="right">a2</div></div>
<div id="bottom">b1</div></body>
</html>
这段代码，center的高度是0。请问什么原因？