html - 当div内的内容增加时，主容器div的高度不会动态增加

Question

下面是我目前所获得的以及我想要实现的目标的截图。第二张图片我已经能够通过手动增加像素的高度来完成，只是为了说明目的，但我希望这可以根据容器内内容的大小自动实现......

图片 1:

图 2:

HTML:

<div id="top-body" style="clear:both">
   <div id="info">
    <p>Dixon Woods School of Dance was established 25 years ago in Newbold Verdon. Although lessons still take place in Newbold Verdon the main activities of the school now take place in their purpose built studios in Oadby.
        All lessons are given under the personal supervision of the principal Michelle Dixon-Woods. The school is recognised as having exceptionally high standards, which is reflected in examination and festival results achieved by the pupils.</p>
   </div>
</div>

<div id="footer1">
   <div id="footer-image">
   </div>
</div>

CSS:

top-body {
margin: 0 auto;
background-color: #ffffff;
height: auto;
overflow: hidden;
position: absolute;
top: 197px;
width: 960px;
padding-top: 7px;
}

info {
width: 327px;
float: right;
margin-right: 39px;
margin-top: 14px;
}

#info p {
font-size: 15px;
font-family: "myriad pro";
line-height: 15px;
text-align: justify;
}

#footer1 {
width: 960px;
height: 23px;
}

#footer-image {
width: 100%;
background-image: url('../images/footer-border1.png');
height: 23px;
}

Answer 1

尝试放置div

#info
    {
    clip:auto;
    }