What does this mean?

background:url('img/middle.png') left; is the background image. When setting up this layout on your own, make sure all the images are the same width, and that they are all aligned the same way (left, right, or centered).
background-repeat:repeat-y; tells the image to tile vertically (along the y-axis), but not horizontally (along the x-axis). This is just in case the container becomes wider than it was originally intended—otherwise, the beginning of the image would show up to the right of the actual background, which would be unsightly.
width:250px; should be fairly obvious: the width of the divider. If you create your own image, you should set this to the width of that image.
vertical-align:top; tells the div to align the text to the top. If you would prefer the content to be aligned to the vertical center or bottom, this is easily doable.
padding-[side] controls the space between the edge of the <div> and the beginning of the content. Each side can have a different amount of padding, which is useful for uneven images such as the sticky note.

This principle is loosely based on the Sliding Doors of CSS, a technique widely used to create expandable images such as button backgrounds. I call my implementation “The Three-Way Doors of CSS”.

Feel free to give feedback and ask questions in the comments section below!

- Brandon