Home/ Questions/Q 138361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T07:15:07+00:00

I’ve noticed that the <input> element in HTML ignores the CSS pair of left

  • 0

I’ve noticed that the <input> element in HTML ignores the CSS pair of ‘left’ and ‘right’ properties. Same for the pair ‘top’ and ‘bottom’. See the sample code below:

<html>     <head>         <style><!--         #someid {             position: absolute;             left: 10px;             right: 10px;             top: 10px;             bottom: 10px;         }         --></style>     </head>     <body>         <input type='text' id='someid' value='something'/>     </body> </html>

The <input> should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input> stays small in the top-left corner of the browser.

If I use ‘left’ and ‘width’, and ‘top’ and ‘height’, then everything works fine. However I don’t know what is the width and the height, I want them adjusted depending of the size of the browser window.

Any ideas how to work around this?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You can Use a Wrapper DIV

            <html>              <head>                      <style><!--                  #wrapper {                      position: absolute;                      left: 10px;                      right: 10px;                      top: 10px;                      bottom: 10px;                  }                  #someid {                    /*  position:relative;  EDIT: see comments*/                     height:100%;                      width:100%                  }     --></style>                 </head>             <body>               <div id='wrapper'>               <input type='text' id='someid' value='something'/>               </div>            </body>        </html>
    • 0