Why doesn't text-align: right work with empty content in Firefox?

Question

Consider the following: (Live Demo)

HTML:

<div contenteditable></div> 

CSS

 div { text-align: right; } 

When you click the div in Firefox , the cursor is on the left (looks like text-align: right; no effect). But, if you start typing, the effect of text-align: right; .

Why? Any ideas how to fix this?

Answer 1

This can be achieved with a simple change:

 <div contenteditable>&nbsp;</div> 

We force an empty space in it.

Well, if space matters, I think you have a problem. But I hope this helps :)