Home/ Questions/Q 3662558
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:25:48+00:00

Newbie CSS question. I thought width:auto for a display:block element meant ‘fill available space’.

  • 0

Newbie CSS question. I thought width:auto for a display:block element meant ‘fill available space’. However for an <input> element this doesn’t seem to be the case. For example:

<body>
  <form style='background:red'>
    <input type='text' style='background:green; display:block; width:auto'>
  </form>
</body>

Two questions then:

  1. Is there a definition of exactly what width:auto does mean? The CSS spec seems vague to me, but maybe I missed the relevant section.

  2. Is there a way to achieve my expected behavior for a input field – ie. fill available space like other block level elements do?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An <input>‘s width is generated from its size attribute. The default size is what’s driving the auto width.

    You could try width:100% as illustrated in my example below.

    Doesn’t fill width:

    <form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

    Fills width:

    <form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

    Smaller size, smaller width:

    <form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

    UPDATE

    Here’s the best I could do after a few minutes. It’s 1px off in FF, Chrome, and Safari, and perfect in IE. (The problem is #^&* IE applies borders differently than everyone else so it’s not consistent.)

    <div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>
    • 0