从绝对子容器扩展父容器，从父容器获取它的大小

Question

我正在开发我的第一个drupal网站，虽然我有很好的网络编程技巧（css，jscript，php）我试图尽可能完全地使用他们的模板跟踪drupal标记。

我的问题是一个3列响应式网站，我没有多少经验。我的左右列（13％+ 1％边距）是div，它们直观地表示沿父容器长度延伸的彩色条纹，中心div（72％）是内容的位置。问题是我决定让父容器通过将子项设置为绝对来控制子div的大小，并使用边距将子项拉伸到父项的维度。 （顶部：x;左：x;底部：x;右：x;） - 要拉伸垂直我使用 parent_container：和 display：block;填充顶：XX％;

列由菜单包装器垂直分割，而顶部容器没有设置高度（ padding-top：xx％），底部容器需要根据内容的规定进行扩展。

问题：如果孩子从父母那里得到他们的身材，我怎样才能让孩子根据孩子的内容调整父母的大小？谢谢！

#main-wrapper {
    position:relative;
    width:100%;
}

#main-wrapper:after {
    content:"";
    display:block;
    padding-top:46%;
}

#main-wrapper-left{
    position:absolute;
    top:0;left:1%;bottom:0;right:86%;
    background:#CC0000; 
}

#main-wrapper-left img {
    width:100%;
    display: block;
}

#main-wrapper-left a{
    display:block;
}

#main-wrapper-right{
    position:absolute;
    top:0;left:86%;bottom:0;right:1%;
    background:#0600ff;
}

#main-wrapper-center{   
    position:absolute;
    top:0;left:14%;bottom:0;right:14%;
    background: #ffffff;
}

<div id="main-wrapper">
    <div id="main-wrapper-left"> images and links go here </div>
    <div id="main-wrapper-center"> header slideshow goes here </div>
    <div id="main-wrapper-right"> images and links go here </div>
</div>

<div> menu </div> // this is where the menu div goes which splits the page page in two

<div id="main-wrapper">
    <div id="main-wrapper-left"> advertisements </div>
    <div id="main-wrapper-center"> main content goes here </div>
    <div id="main-wrapper-right"> advertisements </div>
</div>