how to add margin guidelines inside a DIV that's used as a WYSIWYG editor?

Question

I've written a design editor in html and jquery, which allows people to add textboxes, images, etc and build up a design. To do this, I have a div with a border that serves as the canvas, and the user can add text or images by clicking on buttons that dynamically create draggable, resizable divs, etc, pretty much like adding an image or anything on top of the canvas in Photoshop or Illustrator, or like adding text boxes and images in MS Word.

My question is, how can I add margin guidelines near the edges of the canvas? I'm talking about being able to see the lines similar to how we can choose to "Show Grid" in other editing software. (I don't want a grid though, just the margin lines half a cm from the edges).

I considered using a PNG image that was completely transparent except for margin lines near the edges, and then stretching this image over the canvas, $('#content'). However, every text or image that is placed on top of it will cover the lines. I don't really mind this, but could there be a way to show the lines at all times? I can't give it a higher z-index than the items on the canvas because they will not then be clickable or editable, since the PNG image would cover everything. It's the same thing if I use a bordered div inside $('content'), because again it would make things behind it unclickable.

Please bear in mind that the margin lines are only a visual aid, the user can still place things that overstep this line. Any ideas?

Is there anyway something like this could be done:

#content{ border:1px dotted gray; border-position: -5px; } 

so that it kind of pushes the content DIV's border inside the DIV, instead of at the edge?

Or are there any other ways to add the margins?

Answer 1

Just a quick idea : could you put 4 divs inside your canvas, one at the top, one at the bottom and one on each side ?

Each div could have a width (or height) of a few pixels (your margin), and only one dashed border toward the center of the canvas. This way, you could use a z-index on those divs without hiding the content under it (at least inside the margins...)