css - 内側の div タグが展開されたときにメインの div 要素を展開します

Question

私は古典的なasp.net mvcアプリケーションに取り組んでいます。_Layoutこのページとそれに付随するすべての CSSを使用します。メイン div の CSS は次のとおりです。

#main {
    padding: 8px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}

次のようなビューを作成しました。

<div id="mainContainer">
<div id="drawForm">
@using (Html.BeginForm("UpdateDocument", "Forms", FormMethod.Post))
{
    <table border="1" id="drawDocument">
        <colgroup>
            <col span="1" style="width: 10%;" />
            <col span="1" style="width: 40%;" />
            <col span="1" style="width: 25%;" />
            <col span="1" style="width: 25%;" />
        </colgroup>
        @Html.Partial("_PartialHeader", Model)
        @Html.Partial("_PartialDrawing", Model)
        @Html.Partial("_PartialBody", Model)
        @Html.Partial("_PartialFooter", Model)

    </table>
    if (ViewBag.Status == 1)
    {
        <button type="submit" id="submitDocument">Запази</button> 
        <button style="float:right;" id="finalizeDocument">Приключи</button>  
    }
    else
    { 
        @Html.ActionLink("Назад", "Index")
    }
}
</div>
<div id="imageGallery"></div>
</div>

全体的なアイデアは、この構造を持つ例を見つけたので、私が作成した理由と div のimageGallery隣に配置することです。ただし、この構造を使用すると、テーブルの高さが特定のサイズを超えた場合、div の拡張が停止し、テーブルがメイン div の境界線の外に出ます。テーブル。これは私のビューのCSSです:drawFormmainContainermain

#mainContainer {
    margin: 0 auto;
    min-width: 800px;
    max-width: 950px;

    }
#drawForm 
{
    min-width: 690px;
    max-width: 800px;
    min-height: 800px;
    float: left;
    display: inline;
}
#imageGallery {
    width: 100px; 
    height: 700px;
    float: right; 
    display: inline;
    border: 2px solid grey;
    }
#drawDocument {
    /*border-collapse: collapse;
    result in strange behaviour in Firefox*/
    border-spacing: 0px;
    min-width: 690px;
    max-width: 100%;
}

現在、同じレベルに 2 つの div タグがありますが、上記の問題が発生しています。mainテーブルのサイズに応じて div タグのサイズが変更されるように CSS を変更するにはどうすればよいですか?