堆叠扩展DIV

我试图创建一个包含三列的页面。外部列是直接的。但是，中间栏的顶部需要垂直扩展以适应内容，后面跟着另外两个需要并排放置的div。我的问题是让顶部div扩大时，两个较低的div将向下移动。堆叠扩展DIV

为中轴的核心代码：

// the top column-wide div 
echo '<div id="centre">'; 
// echo some variable length text 
echo '</div>'; 

// the bottom left div 
echo '<div id="centreleft">'; 
// echo some variable length text 
echo '</div>'; 

// the bottom right div 
echo '<div id="centreright">'; 
// echo some variable length text 
echo '</div>';

随着固定高度的顶部DIV，下面的CSS工作：

#centre { 
    position: absolute; 
    left: 230px; 
    top: 30px; 
    width: 690px; 
    overflow: visible; 
} 
#centreleft { 
    position: absolute; 
    left: 230px; 
    top: 355px; 
    width: 335px; 
    overflow: visible; 
} 
#centreright { 
    position: absolute; 
    left: 595px; 
    top: 355px; 
    width: 320px; 
    overflow: visible; 
}

什么我需要改变，以使顶部div是可变高度？我已经尝试将低位div的位置更改为相对位置，但随后所有内容都会写入屏幕的左上角。

来源

2012-04-18 user1342299

为什么[php]标记？附：这些问题在[jsfiddle]（http://jsfiddle.net）中的演示效果更好。 – PeeHaa 2012-04-18 19:39:12

您应该发布HTML格式代替PHP回声语句。 – Jack 2012-04-18 19:42:25