How can I embed a twitch.tv channel with chat on a site?

Question

I am making a twitch page for my site, and I need help on how to make it so there is a twitch.tv player on one side, and the twitch.tv chat on the other side. I tried this:

<div align="left">
    <object type="application/x-shockwave-flash" height="500" width="900"     id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=clodbegamingnetwork" bgcolor="#000000">
        <param name="allowFullScreen" value="true" />
        <param name="allowScriptAccess" value="always" />
        <param name="allowNetworking" value="all" />
        <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
        <param name="flashvars" value="hostname=www.twitch.tv&channel=clodbegamingnetwork&auto_play=true&start_volume=25" />
    </object>

<div align="right">    
    <iframe frameborder="0" scrolling="no" src="http://twitch.tv/clodbegamingnetwork/chat?popout=" height="500" width="350">
    </iframe>
</div>

But it Doesnt work. It does this:

http://prntscr.com/48xiuh

(I zoomed out)

So does anyone fix this for me. I can't seem to figure out how this would work.

Example of how I would like the allignment to look (ignore the title at the bottom of the twitch player): http://prntscr.com/48xjj2

Thanks!

Answer 1

Both the object and iframe elements are positioned as block, meaning that they're the only thing using the entire space in a "line". In order to allow two elements to be side-by-side, you could wrap the object in a div and then do:

#object-div {
    float: left;
}

iframe {
    float: right;
}

By doing so, both elements will share the same line. You could also convert those block elements to inline elements by doing:

#object-div, iframe {
    display: inline-block;
}

But that will only work from IE8 and up.

Answer 2

I did this based on your answers and got this to work! My code is the following...

CSS

#stream { width: 75%; float: left; }
#chat { width: 25%; float: right }

HTML

<section align="center">
        <h1>My LiveStream</h1>
    </section>
    <section>
        <div class="stream" align="center">
            <object type="application/x-shockwave-flash" height="500" width="900" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=clodbegamingnetwork"
            bgcolor="#000000">
                <param name="allowFullScreen" value="true" />
                <param name="allowScriptAccess" value="always" />
                <param name="allowNetworking" value="all" />
                <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
                <param name="flashvars" value="hostname=www.twitch.tv&channel=clodbegamingnetwork&auto_play=true&start_volume=25" />
            </object>

            <iframe frameborder="0" scrolling="no" src="http://twitch.tv/clodbegamingnetwork/chat?popout="  height="500" width="350">
            </iframe>
        </div>
    </section>