How to disable elements selection and resizing in contenteditable div?

Question

E.g. I have the following layout:

Answer 1

Here's what I did to fix this problem. For me this would only happen when the contenteditable element was empty and the resize handles would disappear when there was content so I created the following CSS only solution to go about this:

[contenteditable]:empty:after {
  content: " ";
}

The idea behind the solution is whenever the contenteditable field is empty it applies a blank space pseudo element thus removing the resize tags from showing up when the user selects the contenteditable field. Once the user has entered anything then the pseudo element disappears.

Note, because of the use of pseudo elements, this fix only works on IE9 and up.