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

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.

Answer 2

As Marco said, you simply cannot do it that way. If you don't know the width of the page, you'd have to use javascript to achieve that effect:

$('#myInput').css({ right: 10, position: 'absolute', width: $(document).width() - 20 })

Answer 3

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 4

The css positioning doesn't work quite how you want it to. All it does is set it's position relative to it's parent. The key is that (with most browsers) you only get to specify one of left/right, and one of top/bottom.

You can set the width of the input to 100%, then set the padding-left to 10px and the padding-right to 10px of the parent container of the input. That should give you want you want.