Hello there! Since some of you wanted to know how I made that boxes layout of KenjieZzz and also about how I put all those boxes around my page, I then decided to make this simple tutorial. (Despite my hectic sched. ;P)

Actually, it's quite easy to get that layout if you view the source. My codes are still intact in Kenjie's page. But since not all people know how to view and understand the codes inside the source of the page, I guess I'll just really have to go on, right?

So... Please just follow the steps and all will fall into place. If you have any concerns, kindly just message me and I'll reply as soon as I could.

First thing off, I'll tell you how to make that Box Layout like that of Kenjie's.

BOX LAYOUT

As I've said, it's quite easy right? Because for this layout, all you have to do is copy the codes below. You can paste this stuff in any panel in your homepage.

(I'm going to fill out the boxes with whatever text I want just so you could get an idea of it. Furthermore, the boxes' backgrounds are set to black but you can change it. How? Just change the part in color pink below with any color hex codes. You can see an array of color hex codes in this site: CLICK)

And then... the code now starts... here!

<img src="http://i25.tinypic.com/3343gww.png" width="340" height="900">

<div id="scroll3" style="width:170;height:180;overflow:auto;position:absolute;top:340;left:10;background-color:#000000;">
Oooh, it's the first box. LMAO.
<u>Blah, blah?! =O</u>
</div>

<div id="scroll3" style="width:190;height:180;overflow:auto;position:absolute;top:340;left:190;background-color:#000000;">
You are you ;D youuuuu
</div>

<div id="scroll3" style="width:170;height:180;overflow:auto;position:absolute;top:340;left:390;background-color:#000000;">
Third box!
Care to check my products page? Check it out! Harhar
</div>

<div id="scroll3" style="width:170;height:330;overflow:auto;position:absolute;top:530;left:10;background-color:#000000;">
ANOTHEEEER BOX!
Yay?!
</div>

<div id="scroll3" style="width:370;height:330;position:absolute;top:530;left:190;background-color:#000000;"">
This section would be the biggest one.
You could put an image here. Dimensions of 300x300 pixels.
</div>

<div id="scroll3" style="width:170;height:285;overflow:auto;position:absolute;top:870;left:10;background-color:#000000;">
ANOTHER BOX! ;B
</div>

<div id="scroll3" style="width:190;height:285;overflow:auto;position:absolute;top:870;left:190;background-color:#000000;">
AND ANOTHER...!
</div>

<div id="scroll3" style="width:170;height:285;overflow:auto;position:absolute;top:870;left:390;background-color:#000000;">
FINALLY! LAST BOX!
</div>

FLOATING BOXES

Yes, I'm calling this one as floating boxes. You see those several boxes I have on my page? Well, they're sort of floating because they can be on top of anything. You can put the code below in any panel that you want your box to level at; and of course, to make multiple boxes, just paste the code again and adjust. For this one, it's not quite as easy as that of the Box Layout, because this one requires a trial and error process in terms of numbers, because you have to adjust the length of where your box will have to stay at. Its your own option.

So first off, the part of the code in green are those of which you could change numerically. For the width and height...that's self explanatory, right? But anyway, it refers to the width of your box and the height of your box. For the top and left, it refers as to where your box will 'float' at. "Top" refers as to how far your box will be positioned at from the top of your panel. "Left" refers as to how far your box will be positioned at from your left; so the smaller the number, the closer the box is to the left of your page, and the higher the number, the farther it gets.

Here's the code:
(Once again, you can change the background color
and the color of the border by changing the color hex code.
Hex codes are shaded in pink)

So that's it. I hoped I helped. ^__^