MWUAHAHA.
Have you been waiting for this? (;

So you already know how to make lines right? If not, go and check out chapter 14. Anyway, once you know how to make your lines, make whatever you want. I'll take this tutorial step by step so that no one gets confused because it is pretty damn confusing.
*Reminder: delete spaces after every "<" and spaces before every ">" to get the examples to work properly.*

Step 1: Create your lines that you want.
Example: < div style="height: 150px; width: 4px; background-color: #ff505a;" >< div style="height: 100px; width: 4px; background-color: #ff6972; margin-left: 5px;" >< div style="height: 50px; width: 4px; background-color: #ff838a; margin-left: 5px;" >

Do you notice how the line to type is on the very last bar/line when you want to type? And do you notice how when you type, it goes down instead of across? EDIT: this only happens when editing, but if you plan on opening a kayout shop, I suggest you going through this tutorial so that your requesters can easily change the layout. Continue on to step 2 to figure out how to change that.

Step 2: Go into the source and find yout very first line. Your very first line should be your very first < div > tag you have. Once you find your very first line in the source, go and add in "float: left;". It doesn't matter where you place it but it'd be easier if you just placed it after everything else.
Example: < div style="height: 150px; width: 4px; background-color: #ff505a; float: left;" >< div style="height: 100px; width: 4px; background-color: #ff6972; margin-left: 5px;" >< div style="height: 50px; width: 4px; background-color: #ff838a; margin-left: 5px;" >

sakura | layout tutorials

Notice how the text goes across rather than going down after I added in the "float: left;" thing? To get your text going across instead of down, do the same. But we're not done yet! Also notice how the text you type is always starting at the lines/bars you made? Go to step 3 to learn how to change that.

Step 3: Go into the source again. Find where all your text is and somewhere, type in "margin-left: #px;" to get the text away from the bars/lines you created earlier. And sorry guys. ;n; There're a lot of spaces to delete for this example.
Example: < div style="height: 150px; width: 4px; background-color: #ff505a; float: left;" >< div style="height: 100px; width: 4px; background-color: #ff6972; margin-left: 5px;" >< div style="height: 50px; width: 4px; background-color: #ff838a; margin-left: 5px;" > < /div >< /div >< /div >< p >< span style="font-size:12px; font-family: times new roman; margin-left: 200px;" >sakura | layout tutorials< /span >< /p >< p >< span style="font-size:12px; font-family: times new roman; margin-left: 200px;" >See where my text is now?< /span >< /p >

sakura | layout tutorials

See where my text is now? This is what you want.
But look! I pressed Shift+Enter and now it's back to the lines! Ottoke?

Keep reading. Lol, it works when you press enter alone but if you press Shift+Enter (goes down one line) then it goes back to normal. Here's how to fix this problem.


 

Step 4: Go into your source, like always. Everything that has to do with what you wrote should be inside < p > and < span > tags right? Change all those < p > and < span > tags to < div > tags.
Example: < div style="height: 150px; width: 4px; background-color: #ff505a; float: left;" >< div style="height: 100px; width: 4px; background-color: #ff6972; margin-left: 5px;" >< div style="height: 50px; width: 4px; background-color: #ff838a; margin-left: 5px;" > < /div >< /div >< /div >< div >< div style="font-size:12px; font-family: times new roman; margin-left: 200px;" >sakura | layout tutorials< /div>< /div >< div >< div style="font-size:12px; font-family: times new roman; margin-left: 200px;" >See where my text is now?< /div >< /div >