Выравнивание встроенного чата и потока вместе с css

Question

Я пытаюсь вставить чат вместе с моим потоком twitch на странице Xenforo (форум). Я хочу, чтобы поток был 16: 9, поэтому это HD, и я хочу, чтобы он настраивался в зависимости от разрешения пользователя. Вот то, что я до сих пор сделать это

<style> 
    .twitch {I 
    position: left; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 30px; 
    overflow: hidden; 
    } 


    .twitch iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 


    .chat { 
    position: right; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    overflow: hidden; 
    } 


    .chat iframe { 
    position: absolute; 
    top: 0; 
    right: 0; 

    } 


    .twitchWrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
    } 
    .twitchWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 70%; 
    height: 70%; 
    } 

    .chatWrapper { 
    position: top; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 50px; 
    height: 0; 
    } 
    .chatWrapper iframe { 
    position: top; 
    top: 25; 
    right: 8; 
    width: 29.5%; 
    height: 35%; 
    } 
    </style> 

    <div class="twitchWrapper"> 
    <div class="twitch"> 
    <iframe frameborder="0" scrolling="no" src="http://www.twitch.tv/Sykikal/embed"></iframe> 
    </div> 
    </div> 
    <div class="chatWrapper"> 
    <div class="chat"> 
    <iframe frameborder="0" scrolling="no" src="http://www.videogameinfo.net/forums/chat/popup"></iframe> 
    </div> 
    </div> 

Там просто две проблемы .. чата появляется слишком высоко, оно не совпадает со страницей потокового. http://videogameinfo.net/forums/pages/stream/

Другая проблема заключается в том, что внизу внизу слишком много пустого пространства. Я попытался изменить оболочку чата, чтобы отрегулировать позицию, но даже изменив ее на 1 или что-то выкидывает ее и перемещает ее слишком далеко вниз. Надеюсь, кто-то может помочь.

Answer 1

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

Это пространство, потому что вы даете много дополнений к классу chatwrapper и классу chat.
Просто удалите padding-bottom: 56.25%; от оба класса удалят дополнительное пространство.

И еще один вопрос: чата появляется слишком высоко потому что вы даете IFRAME position:absolute; и это top 0. Изменить это более приблизительно 300px;. например:

.chat iframe { 
    position: absolute; 
    right: 0; 
    top: 300px; 
} 

Надеюсь, что это поможет.