contenteditable, set caret at the end of the text (cross-browser)

output in Chrome:

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>

I believe in FF it would look something like this:

hey
<br />
what's up?

and in IE:

hey
<p>what's up?</p>

unfortunately, there is no nice way of making it so that every browser inserts a <br /> instead of a div- or p-tag, or at least I couldn't find anything online.

ANYWAY, what I am trying to do now is, when I hit the button, I want the caret to be set at the end of the text, so it should look something like this:

hey
what's up?|

any way to do this so it works in all browser?

example:

$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }