Hello, guys. As promised, here's the first requested tutorial, requested by damnationSUruck.Hope this helps you out! And, I'm sorry for the long wait! I've been so busy lately.

Okay, so in reality, two text boxes side by side isn't actually hard to do. Two scrollable text boxes side by side is a bit more complex, but still a bit easy nonetheless. But here I'll show you guys how to put just two non-scrollable text boxes side by side.

The key to this is the 'float:left;' style-thingy. Add it to every single one of them if you don't want to mess things up. The correct application of this tag is to use it in the second part of your 'base code,' (remember that?), right after your 'margin:auto;' tag. If you don't add this to every div you add inside your basecode, things will get messy later on and it won't be easy to fix.

Now, to make two text boxes side by side, first create a box to put your text boxes in. Like this:

< div style="width:600px;float:left;" >

Contrary to popular belief, it is not actually necessary to add a height to everything, just saying. So if you ever feel stressed out about not being able to 'guess' the height of an image in a text box or something, just don't add a height and everything will be fine. This also makes coding way more easier, and easier for users to use. That was a very confusing sentence.. ahem. 

Anyway, of course your width is going to depend on how large you want your layout to be, so adjust that according to your needs. Now, in order to make two even/identical text boxes side by side you need to divide the width by two. Yes, math does apply to coding most of the time. Only if you want everything to be exact, of course. Besides, it's mostly just adding and subtracting, and sometimes dividing. You can always use a calculator if you need to.

After obtaining the result, which in this case is 300, open and close two div tags with that width (which is 300), and a height according to your wish. However, you will also need to add 'float left;' at the end of your div. You should have something like this:

< div style="width:600px;float:left;" >
< div style="width:300px;height:300px;float:left;background-color:#333;" >one< /div >
< div style="width:300px;height:300px;float:left;background-color:#555;" >two< /div >
< /div >

Yes, you can just copy and paste this code, although I suggest you memorize it and adjust to your needs instead. Anyway, just so you could be able to see each text box, I've added a different 'background-color' to each. Here's how it should look:

Now these text boxes should be side by side. If not, there are two possiblities. 1. Your code is incorrect. 2. The width of your text box compared to the width of your outer box is too large. In this last case, please make sure to do your calculations correctly. Remember to decrease your width according to your padding and/or border and everything should be fixed!

Two scrollable text boxes side by side work the same way. Just remember to add the 'overflow:hidden;' to the first div of your text box and so on (check the scrollable text boxes tutorial if you need help with this!). Of course all the things stated above apply to these as well. Just remember to be careful with the widths and all that, and you should be find. And don't worry, I had—and still have a bit—troubles because of this!

Anyway, I hope this tutorial explains this well enough... And I'm sorry for the long wait, I honestly have so much to do, but I'll try to update this more frequently. As always, please leave any questions/tutorial requests below!

Ps. Thank you so much for the 14 upvotes and 70+ subs! I'm glad this tutorial thread is useful to some of you!