Set caret position to zero inside node of contenteditable element in chrome

Question

I have to create a simple text editor. To work in all browser is not required, if it work in latest firefox and chrome are enough.

So the problem is, i have a contenteditable div with child nodes and in chrome when i step inside a node its step automatically to after first letter. Is it possible to set the caret to the zero position?

FIDDLE

<div contenteditable="true">
  some <span>text</span> other text
</div>

When caret step inside the span in chrome, the caret automatically placed after t. I tired to set the position with selection and range, but it doesn't worked.

UPDATE: SOLVED, see my answer, to get how.

In firefox its work as i want.

Answer 1

Thanks everyone, how tired to find a solution for this.

If the child eleme (sapn) has contenteditable attribute with true, its work.

<div contenteditable="true">
  some <span contenteditable="true">text</span> other text
</div>

FIDDLE