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

<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