html - Input form overrides padding? -


i got input form supposed 100% wide inside .content class , have 20px padding inside class , 8px padding left inside of input form. problem left padding inside input form overrides padding inside .content class right.

js: http://jsfiddle.net/8asxx/1/

css:

.content {     min-height: 100%;     background-color: #000;     padding: 20px;!important  } input.text.big {     background-color: #ffffff;     height: 30px;     width: 100%;     border: solid 1px #cccccc;     padding-left: 8px;     color: #333;  } 

html:

<div class="content">     <input class="text big" name="url" type="url" placeholder="example: http://www.facebook.com/fanpage-url" required=""> </div> 

the whole width calculated 100% + 8px input element, overlapping parent div padding:20px. can fix using calc input :

width: calc(100% - 8px); 

example


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -