如何安排div而不会打扰页面设计

Question

如何定位div以便在加载某些内容时扩展我的页面。在下面的图像中，我使用的div正在扰乱页面设计。

我正在使用以下CSS：

#middlePanel {
    width:70%;
    float:left;
    background:#CCC;
}

#forum_act_container
{
    width:300px;
    position:relative;
    left:20px;
    top:20px;
}
#forum_act_header
{
    height:35px;
    border-radius:3px 3px 0px 0px;
    background: linear-gradient(white, #999); /* Standard syntax */
    text-align:center;
    line-height:33px;
}
#forum_act
{
     overflow:scroll;
     height:300px;
     padding:10px;
     border:#FFF 1px solid;
}

以下是他们的html结构：

<div id="middlePanel">
      <div id="forum_act_container">
        <div id="forum_act_header">Newest Forum Activites</div>
        <div id="forum_act"><?php echo $forum_activities; ?></div>
      </div>
</div>

我应该使用什么css代码，以便middlePanel div随内容动态扩展。

Answer 1

你需要在中间面板中使用更清晰的div，所以添加

<div id="middlePanel">
      <div id="forum_act_container">
        <div id="forum_act_header">Newest Forum Activites</div>
        <div id="forum_act"><?php echo $forum_activities; ?></div>
      </div>
<div style="clear: both;"></div>
</div>

Answer 2

当您更改#middlePanel height时，#forum_act会展开（或删除height: 300px;并使用元素填充div）。 #forum_act_container您设置position:relative; top:20px; left:20px;表示#forum_act_container超出#middlePanel的原因。而不是：

#forum_act_container
{
    width:300px;
    position:relative;
    left:20px;
    top:20px;
}

删除left和top位置并添加padding或margin，例如：

#forum_act_container
    {
        width:300px;
        position:relative;
        padding:20px;
    }

您的示例：http://jsfiddle.net/jc8mA/

或者你可以为#middlePanel添加额外的填充底部，如果你不想改变位置：相对顶部，左边。