Hello again! I'm very sorry for being so inactive, haha. But anyways, here's a tutorial on horizontal scrolling requested by hyper_inspirit. Thank you for requesting this! I'm sorry for making this like five months later, orz. I do hope this helps (somewhat)!

Horizontal Scroll + Hidden Scrollbar

So basically to do overflow you create the same 3 divs I have previously showed in chapter three. To avoid having to open a new tab and switch between them, I'll just add the basic code here.

< div style="width:600px;margin:auto;" >
< div style="width:600px;height:400px;float:left;overflow:hidden;" >
< div style="width:620px;height:400px;float:left;overflow:auto;" >
< div style="width:600px;float:left;" >text< /div >
< /div >
< /div >
< /div >

Now, you have to flip things here. Instead of adding the 20px in width for the scrollbar to hide, you add the 20px to the height. And instead of the 4th div being the same width as the 2nd div, you actually have to make it the width higher than the 2nd div in order for it to scroll horizontally. In this case, make it higher than 600px, like this:

< div style="width:600px;margin:auto;" >
< div style="width:600px;height:400px;float:left;overflow:hidden;" >
< div style="width:600px;height:420px;float:left;overflow:auto;" >
< div style="width:800px;float:left;" >text< /div >
< /div >
< /div >
< /div >

I'm not sure if this only happens to me or not, or if I'm doing things the hard way (hopefully not), but the width of your 4th div has to be the total width of the divs you put inside. It's kind of confusing to explain it in words, but I'll show an example.

If you want to add 2 text boxes with a width of 600px each, you add/sum each of the widths, and in this case, get a total of 1200px. If you were to add 3 of these, the total would be 1800px. Therefore, the width of your 4th div should be 1800px. In this case, your code should be as following (and I've added different background-colors in order to be able to distinguish between div's).

And here is the code I used:

< div style="width:600px;margin:auto;" >
< div style="width:600px;height:300px;float:left;overflow:hidden;" >
< div style="width:600px;height:320px;float:left;overflow:auto;" >
< div style="width:1800px;float:left;" >
< div style="width:600px;height:300px;float:left;background-color:#D0F6EB;" >one< /div >
< div style="width:600px;height:300px;float:left;background-color:#B9EFE0;" >two< /div >
< div style="width:600px;height:300px;float:left;background-color:#9AEBD4;" >three< /div >
< /div >
< /div >
< /div >
< /div >

And that's it basically. If you want to add another text box of the same width, increase the width of the 4th div to 2400px, and if you want to add another text box with a width of 400px, increase the width to 2200px.

Horizontal Scroll + Thin Scrollabar

For this you basically have to do the same thing as with a regular div, just flipped (sort of). Here's the code:

< div style="width:600px;margin:auto;" >
< div style="width:600px;height:300px;float:left;overflow:hidden;" >
< div style="width:620px;height:314px;float:left;overflow:auto;" >
< div style="width:1800px;float:left;" >
< div style="width:600px;height:300px;float:left;background-color:#D0F6EB;" >one< /div >
< div style="width:600px;height:300px;float:left;background-color:#B9EFE0;" >two< /div >
< div style="width:600px;height:300px;float:left;background-color:#9AEBD4;" >three< /div >
< /div >
< /div >
< /div >
< /div >

So I decreased the height of the 4th div to 113px, and increased the width to 20px in order to hide the vertical scrollbar. It should look like this:

However, I don't know if you can notice it or not, but you can somewhat scroll vertically on it as well. This is why I usually add 3px to the height of the 2nd div, and also increase the height of the 4th div by 3px. Also, you no longer need to increase the width of the 3rd div by 20px. It should now look like this:

Ta-da! It should no longer do that vertical scroll thing that bothers me so much.

The code is as follows:

< div style="width:600px;margin:auto;" >
< div style="width:600px;height:303px;float:left;overflow:hidden;" >
< div style="width:600px;height:317px;float:left;overflow:auto;" >
< div style="width:1800px;float:left;" >
< div style="width:600px;height:300px;float:left;background-color:#D0F6EB;" >one< /div >
< div style="width:600px;height:300px;float:left;background-color:#B9EFE0;" >two< /div >
< div style="width:600px;height:300px;float:left;background-color:#9AEBD4;" >three< /div >
< /div >
< /div >
< /div >
< /div >

You can play around with it and do some pretty cool stuff! Like, maybe add a background image (as show on chapter seven).

And I think that's about it haha. I really do hope this helps you guys out! And hopefully it's not confusing..

If you have any questions about this tutorial or anything related to coding in general, just leave a comment below and I'll help you out! Also, I don't know if I've said this or not before, but I would absolutely love to see the layouts you make, just leave a comment below and I'll check it out. ^^