html - CSS:我需要以一种非常具体的方式排列 < div > ，但无法弄清楚(看图片)

Question

我画了这张图来解释:

http://rdt.org.ni/here/for_stackoverflow.png

所有方 block 都是<div>的。具有相同颜色的 div 属于同一个父 div。黄色和绿色的 div 没问题。问题是内容 div 的高度可以变化，我需要红色 div 始终保持在“6”方 block 旁边，如图所示，但是内容 div 的高度阻止我这样做，因为如果它增长，红色 div下降，反之亦然(但内容 div 的高度永远不会超过“6”方 block )。

另一方面，绿色 div 的高度也可能变化，因此给红色 div 一个绝对位置并不能解决问题。我需要红色 div 始终“跟随”“6”方 block 。我尝试了很多方法都没有成功。

任何帮助将不胜感激。谢谢!

重要编辑:

好的，好的，好的!对不起!我道歉!!我知道我必须提供更多细节!棘手的是:我画的布局只用于主页!黄色和红色 div 将在主页以外的任何页面上消失，只有绿色 div 和内容会保留(这就是为什么内容永远不会走得更远，那只是在主页上，在其他页面上它确实走得更远)。因此，我无法制作表格，也无法将“6”方 block 与红色方 block 放在一个 div 中。

Answer 1

像这样尝试在另一个 div 中为内容创建一个 div

<div id="content_out">
    <div id="content_in">
    </div>
</div>

和CSS

#content_out{
//set the exact size
width:
height:}
#content_in{
//the size inside here can vary}