Side by Side Stream and Chat

You need to do something like this:

HTML

<div id="stream">...stream shortcode here...</div>
 <div id="chat">...chat shortcode here...</div>

CSS

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

I have tried this within a new page I take it?

https://www.completegaming.net/site/?page_id=73

However its not showing properly, is it at all possible to make the code run side by side as default within the actual plugin somewhere?

Sorry very new to wordpress however your plugin is fantastic and one I will try to use.

Hi there,

I don’t do it by default because people not everyone is going to use it that way.

I have added by default, the container tag for the chat so you don’t need to wrap the chat in div anymore.

A future version may allow for various layouts.

Sorry I probably sound like such a noob, but how exactly do I get the chat to go side by side, I need an idiots guide it seems as I’m not quite getting it, I added the chat without the div after adding the CSS code to the CSS editor file.

https://www.completegaming.net/site/?page_id=71

And this is with div tags:

https://www.completegaming.net/site/?page_id=73

The chat has moved to the right like I want but its on a different line still under the video pane.

Hi Ben,

It appears that you put the html into your page in the visual tab mode in WordPress, make sure you only add html tags when you’re on the Text tab.

<div id="stream">[plumwd_twitch_stream channel="bluefin221"]</div>
 [plumwd_twitch_chat channel="bluefin221"]

I realize it’s a bit inconsistent but you don’t need to wrap the chat code in the div, it’s already included in the shortcode.