Stitched Together


This layout is called "Stitched Together" because it reminds me of sewing fabric together. This layout is perfect for a blog, as you can have each entry be in its own box. Alternatively, you could have one long box run down each side of the page. You can also use this for a website without a blog - it's your layout so you decide!

You even have a little footer for the blog entries!

Terms Of Use

  • Leave the credit to roses-thorns. The credit for "patterns" is not required, but recommended.
  • Don't alter the CSS file, except for minor changes, ie: font size, font family. If you do, change the credit to read "modified from"
  • Full terms here.


Here is the template to use for creating separate blog enteries that will look like this box. To use a 50x50 avatar, use class="smallfloat" and for 100x100, use class="avatar" :

<div class="lbox">
<h2>Your Title</h2>
<img src="/layouts/StitchedTogether/icon.gif" class="smallfloat" alt="icon" /> <p>Your Entry</p>
<div class="lboxfoot"><p>Posted by YOUR NAME on DATE.</p></div>

To have one box on each side of the page, place all your content into one class="lbox" on the left and all of your content into one class="rbox" on the right. Example:

<div class="lbox">
<p>All your content</p>
<div class="rbox">
<p>All your sidebar</p>

If you need further help using this layout, please read my tutorial.

Posted by YOUR NAME on DATE.