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

Question

Я пытаюсь встроить чат вместе с моим потоком сообщений на странице 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;
}

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