CODEWITHSUNDEEP
csscross-browser
Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

Anchoring trick isn't working in Firefox

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>

alt text

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 :)

Upvotes: 0

Views: 93

Answers (4)

Dan Phillimore
Dan Phillimore

Reputation: 480

How about using box-sizing on the outer <div>? This way you can avoid adding an extra one:

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

Of course, this would only apply if you didn't mind adding the padding to the outer <div>...

Tested in FF 4.0 & Chrome 10.0

Upvotes: 0

Knio
Knio

Reputation: 7090

<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

Upvotes: 0

Stephan Muller
Stephan Muller

Reputation: 27600

"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/

Upvotes: 0

Kevin
Kevin

Reputation: 3841

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>

Upvotes: 2

Related Questions