Force content inside div or p

Question

Does anyone know how to make the content of a contenteditable div be surrounded by a div or p? If the content contenteditable is an empty div - selecting it with a range works in Firefox, for example, but on chrome the text is inserted before the div. I need text

HTML: <div id="edit" contenteditable="true"><div id="insert"></div></div> Tried this but the results are very inconsistent cross browser: var range = document.createRange(); range.selectNodeContents(document.getElementById('insert')); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); 

Second question: if it is possible for empty contentEditable, can this be used to manually insert new lines so as never to get <br /> tags instead of a new div or p?

thanks

Update

It seems that to some extent the following works:

 <div id="edit" contenteditable="true"><div id="insert"><br/></div></div> 

With the optional Firefox, Chrome, Safari create a single blank line, where all the input ends inside the div, but Internet Explorer (proven version 9) shows two blank lines. If there is no other solution - any ideas how to fix this without using browser detection?

Answer 1

You can override the br tag in the css file.

 br { display:block; clear: both; height: 1em; line-height: 1em; } 

I'm not quite sure em will work. If not, you will also have to try px .