Anchoring trick isn't working in Firefox

Question

This code has different result in Firefox and Chrome

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <input type="text" style="position:absolute; left:0; right:20px;" />
</div>

How to make the text box anchored 0px to the left and 20px to the right side of the div?

NOTE: div's width must fluid 50%.

Thank you :)

Answer 1

Get rid of left:0;

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <input type="text" style="position:absolute; right:20px;" />
</div>

Answer 2

"How to make the text box anchored 20px to the right side of the div?" Either I don't get what you mean by this, or the example works perfectly fine.

http://jsfiddle.net/GmMCQ/

Answer 3

<div style="border:1px solid red; width:50%; height:50px; position:relative;">
    <div style="position:absolute; left:0; right:20px;">
        <input type="text" style="width: 100%" />
    </div>
</div>

<input> behaves badly in some browsers, wrap it in a div