html - コンテンツで複数の div を展開する

Question

現在、コンテンツ用の領域を作成するいくつかの div があります。2 つの div は x 軸で展開され、ページの端から端まで塗りつぶされますが、2 つの div はコンテンツが停止するまで下向きに展開されます。各 div (62px x 62px) で異なる背景画像を使用しています。これは、拡大する 4 つの div で繰り返されます。

外側の div の高さを「自動」に設定すると、他の div が爆発します。しかし、高さの値を設定するとうまくいきますか? 子 div が爆発することなく、コンテンツが親 div の高さ調整を制御できるようにするにはどうすればよいですか?

前もって感謝します！

テストサイト

HTML

<div id="video_outer">
<div id="video">
    <div id="v_top_left">
    </div>
        <div id="v_top">
        </div>
        <div id="v_top_right">
        </div>
        <div id="v_left">
        </div>
        <div id="v_right">
        </div>
        <div id="v_bottom_left">
        </div>
        <div id="v_bottom">
        </div>
        <div id="v_bottom_right">
        </div>  
   </div>
<div id="v_content">
    Content
    <br />
    More Content
</div>

CSS

#video_outer {
    width: 100%;
    height: 300px;        /* <<<<--- This needs to be auto */
    min-height: 100px;
    padding-bottom: 62px;

}

#v_content {
    width: auto;
    height: 200px;
    top: -550px;
    left: 0px;
    position: relative;
    padding-left: 62px;
    padding-top: 62px;
    margin-right: 62px;
    z-index: 2;
}

#video {
    width: 100%;
    height: 100%;
    padding-bottom: 62px;
    background-image: url(images/content_fill_red.png);
    background-repeat: repeat-x repeat-y;
    position: relative;
    left: 0px;
    z-index: 2;
}

#v_top_left {
    background-image: url(images/content_top_left_red.png);
    background-repeat: no-repeat;
    position: relative;
    left: 0px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

#v_top {
    background-image: url(images/content_top_red.png);
    background-repeat: repeat-x;
    position: relative;
    left: 0px;
    top: -62px;
    width: auto;
    height: 62px;
    z-index: 5;
    margin-right: 62px;
}

#v_top_right {
    background-image: url(images/content_top_right_red.png);
    background-repeat: no-repeat;
    position: relative;
    margin-left: auto;
    top: -124px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

#v_left {
    background-image: url(images/content_left_red.png);
    background-repeat: repeat-y;
    position: relative;
    top: -124px;
    left: 0px;
    width: 62px;
    height: 100%;
    z-index: 5;
}

#v_right {
    background-image: url(images/content_right_red.png);
    background-repeat: repeat-y;
    position: absolute;
    top: 62px;
    right: 0px;
    /*margin-left: auto;*/
    width: 62px;
    height: 100%;
    z-index: 5;
}

#v_bottom_left {
    background-image: url(images/content_bottom_left_red.png);
    background-repeat: no-repeat;
    position: relative;
    left: 0px;
    top: -124px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

#v_bottom {
    background-image: url(images/content_bottom_red.png);
    background-repeat: repeat-x;
    position: relative;
    left: 0px;
    top: -186px;
    width: auto;
    height: 62px;
    z-index: 5;
    margin-right: 62px;
}

#v_bottom_right {
    background-image: url(images/content_bottom_right_red.png);
    background-repeat: no-repeat;
    position: relative;
    margin-left: auto;
    top: -248px;
    width: 62px;
    height: 62px;
    z-index: 10;
}

Answer 1

divsのプロパティを与えてみてくださいdisplay: inline-block;