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

Question

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

У меня есть элемент основного тела, содержащий видео и боковую панель div. Они настроены на float влево и вправо, и они вместе с div заголовка все содержатся внутри одного большого «фрейма» div, центрированного на странице. План выходит что-то вроде этого:

<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. Вы можете увидеть проблему here on my website.

Я предполагаю, что это либо связано с свойствами поплавка, либо с свойствами позиции, но я не могу понять, что не так. Вот то, что мой 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; 
} 

Опять же, это все живое at my website.

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

Answer 1

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