Высота основного контейнера div не увеличивается динамически, когда содержимое внутри div увеличивается

Question

Ниже приведены снимки того, что у меня есть на данный момент, и чего я хочу достичь. Второе изображение, которое я смог сделать, увеличивая высоту с помощью пикселей вручную только для иллюстрации, но я хотел бы, чтобы это достигалось автоматически из размера содержимого внутри контейнера ...

Image1:

Image2:

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

Я знаю таблицы сосать и все, но быстрый и грязный способ заменить топ-дивы с ячейками таблицы с высотой 100%, например, так:

<table height="100%"> 
<tr><td height="100%" id="top-body"> 
    <div id="info"> 
    <p>...</p> 
    </div> 
</td></tr> 
<tr><td id="footer1"> 
    <div id="footer-image"> 
    </div> 
</td></tr></table> 

Не забудьте также установить высоту от элемента корпуса до 100%

В CSS3 вы можете рассчитать высоту до 100% минус что-то. См CSS How to set div height 100% minus nPx

Answer 2

попробовать поставить Див

#info 
    { 
    clip:auto; 
    }