using position:absolute to set an inputs width

Question

A simple yet annoying one - I am tryign to set an input[type=text] width by using absolute positioning (ie right:10px;left:10px) yet I cant get it to play ball.

Does anyone have a solution to kick it into shape?

Answer 1

Actually, what you're doing works fine. You just need to remember to set the parent element's position as well.

<div>
   <input type="text">
</div>

Then CSS it:

div {
    width: 400px;
    position: relative;
}
input {
    position: absolute;
    left: 5px;
    right: 5px;
}

This would result in the input box being 390px.

If you set the div to be flexible, then the input box would be too.

edit: seems to only work in Chrome, so you'd need to put the input inside another element. This works in FF and IE too:

<div id="parent">
    <div><input type="text"></div>
</div>

with this CSS:

#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
  }
    #parent div input {
        width: 100%;
    }

This has the expected effect. A bit hack-ish, maybe...

Answer 2

What you are trying to do can't be done that way, as far as I know. One of the values (left or right) should suffice for the position, then you just have to set width and height.