What is a work around for displaying empty <p> tags inside contenteditable div?

Question

This is for Internet Explorer only.
I have a content editable div in which my users enter rich content (nicEditor).

I have functionality where I set the html of the div with predefined templates. Ideally I would like my templates to be like.

<p><b>My Heading1</b></p>
<p></p>
<p></p>
<p><b>My Heading2</b></p>
<p></p>
<p></p>
<p><b>My Heading3</b></p>
<p></p>
<p></p>

Where it renders like

My Heading1
blankline
blankline
My Heading2
blankline
blankline
My Heading3
blankline
blankline

However it renders like so.

My Heading1
My Heading2
My Heading3

I've tried using these instead but there are issues with all of them.
<p>&nbsp;</p>, <p><span style="display:none;">&nbsp;</span></p> - Always a space on each line.
<p><br/></p> - When a user starts typing a new line appears.
<br/>, <span><br/></span> - Works for spacing except when a user uses one of the insert list commands. And all the content is put under a single list item.

What can I do to have my <p> tags display in my div?

Answer 1

I have had success in using <P>&#8203;</P> The Zero Width Space character. However, this makes it so that if a user wishes to delete a line they must press backspace twice. I'm going to ask a new question to address that.
Here