Div не расширяется для элементов

Question

У меня есть новый веб-сайт для моей продюсерской компании, и сейчас он довольно суетливый.

У меня есть основной элемент тела, который содержит видео и div боковой панели. Они установлены так, чтобы плавать влево и вправо, и они вместе с div заголовка содержатся внутри одного большого div "frame", который центрируется на странице. Схема выглядит примерно так:

<frame>
    <header>
    </header>
    <main>
        <video>
            <vidframe> <- This is for keeping the iframe's aspect ratio (read it in some online tutorial)
                <iframe>
                </iframe>
            </vidframe>
        </video>
        <sidebar>
        </sidebar>
    </main>
</frame>

Теперь у рамки есть белый фон, и это отделяет контент от моего фонового изображения. Однако проблема заключается в том, что основной div и, соответственно, div кадра не расширяются за заголовок, чтобы содержать div видео и боковой панели. Вы можете посмотреть проблему здесь на моем сайте.

Я предполагаю, что это связано либо со свойствами float, либо со свойствами position, но я не могу понять, что не так. Вот как выглядит мой CSS:

div.frame {
    width:70%;
    height:auto;
    background-color:#FFF;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    box-shadow:0 0 20px 0 #000;
}
div.main {
}
div.video {
    margin-left:3.57%;
    margin-top:3.57%;
    width:57.14%;
    float:left;
}
div.vidframe {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
div.vidframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
div.sidebar {
    margin-right:3.57%;
    margin-top:3.57%;
    width:32.14%;
    float:right;
}

Опять же, все это в прямом эфире на моем сайте.

Спасибо за вашу помощь!

Answer 1

Вы должны очистить поплавки. добавлять <div style="clear:both"></div> перед закрывающим тегом div с классом main. после строки 34 в вашем HTML