嵌套div的CSS溢出问题

Question

我正在为客户创建一个音乐网站，并尝试使用单页面布局，以便在导航过程中不会中断音乐播放器。我已经使用了css属性overflow：隐藏在每个部分的div上，但由于某种原因，当我用overflow：auto元素嵌入另一个div时，它将无法识别。这是有问题的，因为计划内容不适合单个页面，例如评论，帖子和图像缩略图。

该页面在此处显示： http://www.dennispiano.com

和我的测试服务器（包含一些未部署的内容）在这里：http://205.209.87.168/DennisMusic/index.php

我所谈论的一个例子是图像部分（在测试服务器链接上，尚未部署到实时网站）

相关HTML

<div class="contentbody">

<div id="images" class="pageSection">
     <h1 style="padding:0 0 0 10px; background-color:#00c7c0;">
     <img src="images/pageAssets/images.png" alt="Home" height="25" width="83" /></h1>
     <?php include('lib/php/thumbnails.php'); ?>
</div>

<!-- end .contentBody --></div>

相关的PHP     

//Variable Declaration (remove after xml structure creation)
$images=80;
$thumblimit=5;
$imagelines=($images/$thumblimit);

//

echo '<div class="sectionContent">'; //<-- busted content scrolling div
//Display Thumbnail tiles
for($i=0;$i<$imagelines;$i++) {

     echo '<div>';
     for($ii=0;$ii<$thumblimit;$ii++) {
          echo '<div style="display:block; margin:0 10px 0 10px; border:1px solid #fff;     background-color:#c90; width:50px; height:50px; float:left;"></div>';
     }
     echo '</div><br /><br /><br /><br />';

}

echo '</div>';

?>

相关CSS

.contentBody {
    overflow:hidden;
}

.pageSection {
        width:100%;
        min-height: 700px;
        display:block;
}

.sectionContent {
        overflow:auto;
        display:block;
        width:100%;
}