Take a look at this example: http://jsfiddle.net/nojv18wf/
<div>
<div class="display">Blah blah blah?</div>
<div class="input" contenteditable="true"></div>
</div>
<br /><br /><br /><br />
<div>
<div class="display">Blah blah blah?</div>
<div class="input border" contenteditable="true"></div>
</div>
Observe how the cursor behaves when you click on "blah blah blah."
In the first scenario, it moves to before the blah blah blah, but once you start typing, it then appears in the correct position.
However, in the second case with the border, it functions correctly from the beginning.
Is there a way to make the cursor show up in the right place without resorting to adding an unsightly border?
UPDATE: It seems this issue is only present in Chrome; everything works fine in Firefox and even IE.
UPDATE 2: I am using inline formatting to ensure that the text wraps smoothly as if it were a seamless continuation, rather than wrapping the entire block. For example: http://jsfiddle.net/khkurs5t/