css - 親からサイズを取得する絶対子から親コンテナを展開する

Question

私は最初の drupal サイトに取り組んでおり、優れた Web プログラミング スキル (css、jscript、php) を持っていますが、テンプレートをできるだけ完全に使用して drupal マークアップに従おうとしています。

私の問題は、あまり経験のない 3 列のレスポンシブ サイトです。左と右の列 (13% + 1% マージン) は、親コンテナーの長さに沿って伸びる色付きのストライプを視覚的に表す div であり、中央の div (72%) はコンテンツが配置される場所です。問題は、子を絶対に設定し、マージンを使用して子を親の寸法に引き伸ばすことにより、親コンテナが子divのサイズを制御できるようにすることにしました。(top:x;left:x;bottom:x;right:x;) - 垂直方向に伸ばすには、parent_container:afterとdisplay:block;padding-top: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>