html - CSS: Percentage centering input with padding -


html (part of form):

    <div class="container">         <a id="p1_icon"></a>                                         <input id="p1" class="input" name="p1" type="password" placeholder="password">     </div> 

css:

.container {     width:80%;     margin-left:10%;     margin-right:10%;  // unnecessary     position:relative; // allow icon positioned in input } .input {     width:100%;     padding: 10px 15px 10px 30px;  // icon sits in 30px padding-left.     ... other styling } #p1_icon {     @include sprite_index(20px, 20px, -1063px, -246px); // sass icon sprite     position:absolute;     top:9px;     left:7px;               }  

the problem, of course, padding on .input gets added 100% width, ends being wider container (and therefore not centered).

how can input fill container entirely? can javascript fine, i'd mobile-friendly css solution if 1 exists. (note: need container auto-generated error messages. i'd container width stay @ 80% match other stuff.)

thanks.

add box-sizing: border-box input:

http://jsfiddle.net/thirtydot/qatux/

.input {     width: 100%;     padding: 10px 15px 10px 30px;     -moz-box-sizing: border-box;          box-sizing: border-box; } 

more information:


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -