请问腾讯软件中心头部写的代码怎么会分2行显示？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列横下布局</title>
<style>
*{margin: 0; padding: 0; font-size: 14px; font-color:rgb(50,50,50);list-style: none;font-family:Verdana, Geneva,sans-serif, 宋体; }
div{display:block;}
    .warp{background-color: #FFFF00;width:910px; margin:0 auto; }
    .head{width: 100%;}
    .logo h1{background:url(images/logo.gif) no-repeat;
     width: 217px;
        height: 63px;
        text-indent: -9999%;
        cursor:pointer;}
    h1{
     display:block;
     font-size:2em;
     -webkit-margin-before:0.67em;
     -webkit-margin-after:0.67em;
     -webkit-margin-start:0px;
     -webkit-margin-end:0px;
     font-weight:bold;
    }
    .logo dl{float: right;margin-top: 10px;}
    .logo dt{font-width:bold;color: #525252;line-height:26px;}
    .logo dd{font-size:12px; color: #828282; line-height: 24px;}
    .main{background-color: yellow; width: 100%; overflow: hidden;}
    .left{background-color:#000000; width: 600px;float: left; }
    .right{background-color: #00FF00; width: 280px;float:right;}
    .foot{background-color: purple;width: 100%;}
</style>
</head>
<body>
   <div>
    <div>
      <div>
         <h1><a href="#">腾讯软件中心</a></h1>
         <dl>
         <dt>腾讯软件中心，腾讯精品软件展示平台</dt> 
         <dd>我们会不断提升产品的性能和体验，为您提供最好用的软件！</dd></dl>
      </div>
    </div>
    <div>
    <div>left</div>
   <div>right</div>
    </div>
<div>foot</div>
</div>
</body>
</html>