Aligning embedded chat and stream together with css

Question

I'm trying to embed a chat along with my twitch stream on a Xenforo (forum software) page. I want the stream to be 16:9 so it's HD, and I want it to adjust based on the user's resolution. Here's what I have so far to do that

   <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>

There's just two problems.. The chat appears too high up, it isn't aligned with the streaming page. http://videogameinfo.net/forums/pages/stream/

The other problem is that there's too much empty space down at the bottom. I tried changing the chat wrapper to adjust the position, but even changing it to a 1 or something throws it way off and moves it too far down to the bottom. Hoping someone can help.

Answer 1

You have issue because you have not proper HTML structure.

The below space is because you give lots of padding to chatwrapper class and chat class.
Just remove padding-bottom: 56.25%; from both class will remove your extra space.

And another issue: The chat appears too high up because you give iframe position:absolute; and it's top is 0. Change it to more approximately 300px;. like:

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

Hope it helps.