CSS Input with width 100 goes outside parent s bound

Question

I am trying to make a login form constituted of two input fields with an inset padding  but those two fields always end up exceeding its parent s boundaries  the issue stems from the added inset padding  What could be done in order to rectify this issue   JSFiddle snippet  http   jsfiddle net 4x2KP   N B   The code may not be at its cleanest  For instance  the span element that encapsulates the text inputs may not be needed at all    x000D   x000D       mainContainer   x000D       line-height  20px  x000D       font-family   Helvetica Neue  Helvetica Arial sans-serif  x000D          background-color  rgba 0 50 94 0 2   x000D       margin  20px auto  x000D       display  table  x000D       -moz-border-radius  15px  x000D       border-style  solid  x000D       border-color  rgb 40  40  40   x000D       border-radius  2px 5px 2px 5px   5px 2px 5px 2px  x000D       border-radius  2px  x000D       border-radius  2px 5px   5px  x000D       box-shadow  0 5px 10px 5px rgba 0 0 0 0 2   x000D        x000D       x000D       loginForm   x000D       width  320px  x000D       height  250px  x000D       padding  10px 15px 25px 15px  x000D       overflow  hidden  x000D        x000D       x000D       login-fields  gt   login-bottom input login-button normal   x000D       float  right  x000D       padding  2px 25px  x000D       cursor  pointer  x000D       margin-left  10px  x000D        x000D       x000D       login-fields  gt   login-bottom input login-remember   x000D       float  left  x000D       margin-right  3px  x000D        x000D       x000D       spacer   x000D       padding-bottom  10px  x000D        x000D       x000D         ELEMENT OF INTEREST HERE     x000D      input type text   x000D      input type password    x000D          width  100   x000D       height  20px  x000D       padding  5px 10px  x000D       background-color  rgb 215  215  215   x000D          line-height  20px  x000D          font-size  12px  x000D          color  rgb 136  136  136   x000D          border-radius  2px 2px 2px 2px  x000D          border  1px solid rgb 114  114  114   x000D       box-shadow  0 1px 0 rgba 24  24  24 0 1   x000D        x000D       x000D      input type text  hover  x000D      input type password  hover  x000D      label hover   input type text   x000D      label hover   input type password    x000D        background rgb 242  242  242   important  x000D        x000D       x000D      input type submit  hover   x000D        box-shadow  x000D          inset 0 1px 0 rgba 255 255 255 0 3   x000D          inset 0 -10px 10px rgba 255 255 255 0 1   x000D        x000D       lt div id  mainContainer  gt  x000D           lt div id  login  class  loginForm  gt  x000D               lt div class  login-top  gt  x000D               lt  div gt  x000D               lt form class  login-fields  onsubmit  alert  test    return false   gt  x000D                   lt div id  login-email  class  login-field  gt  x000D                       lt label for  email  style  -moz-user-select  none -webkit-user-select  none   onselectstart  return false   gt E-mail address lt  label gt  x000D                       lt span gt  lt input name  email  id  email  type  text  gt  lt  input gt  lt  span gt  x000D                   lt  div gt  x000D                   lt div class  spacer  gt  lt  div gt  x000D                   lt div id  login-password  class  login-field  gt  x000D                       lt label for  password  style  -moz-user-select  none -webkit-user-select  none   onselectstart  return false   gt Password lt  label gt  x000D                       lt span gt  lt input name  password  id  password  type  password  gt  lt  input gt  lt  span gt  x000D                   lt  div gt  x000D                   lt div class  login-bottom  gt  x000D                       lt input type  checkbox  name  remember  id  login-remember  gt  lt  input gt  x000D                       lt label for  login-remember  style  -moz-user-select  none -webkit-user-select  none   onselectstart  return false   gt Remember my email lt  label gt  x000D                       lt input type  submit  name  login-button  id  login-button normal  style  cursor  pointer  value  Log in  gt  lt  input gt  x000D                   lt  div gt  x000D               lt  form gt  x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

You also have an error in your css with the exclamation point in this line:

background:rgb(242, 242, 242);!important;

remove the semi-colon before it. However, !important should be used rarely and can largely be avoided.

User · Answer

If all above fail  try setting the following properties for your input  to have it take max space but not overflow   input       min-width  100       max-width  100

User · Answer

Do you want the input fields to be centered  A trick to center elements  specify the width of the element and set the margin to auto  eg   margin   0px auto  width 300px   A link to your updated fiddle   http   jsfiddle net 4x2KP 5

User · Answer

According to the CSS basic box model  an element s width and height are applied to its content box  Padding falls outside of that content box and increases the element s overall size  As a result  if you set an element with padding to 100  width  its padding will make it wider than 100  of its containing element  In your context  inputs become wider than their parent   You can change the way the box model treats padding and width  Set the box-sizing CSS property to border-box to prevent padding from affecting an element s width or height   border-box   The width and height properties include the padding and border  but not the margin    Note that padding and border will be inside of the box   Note the browser compatibility of box-sizing  IE8    At the time of this edit  no prefixes are necessary   Paul Irish and Chris Coyier recommend the  quot inherited quot  usage below   html     box-sizing  border-box         before    after     box-sizing  inherit     For reference  see      Box-sizing  Border-box   FTW Inheriting box-sizing Probably Slightly Better Best-Practice   Here s a demonstration in your specific context   x000D   x000D   mainContainer     line-height  20px    font-family   Helvetica Neue   Helvetica  Arial  sans-serif    background-color  rgba 0  50  94  0 2     margin  20px auto    display  table    -moz-border-radius  15px    border-style  solid    border-color  rgb 40  40  40     border-radius  2px 5px 2px 5px   5px 2px 5px 2px    border-radius  2px    border-radius  2px 5px   5px    box-shadow  0 5px 10px 5px rgba 0  0  0  0 2      loginForm     width  320px    height  250px    padding  10px 15px 25px 15px    overflow  hidden     login-fields  gt   login-bottom input login-button normal     float  right    padding  2px 25px    cursor  pointer    margin-left  10px     login-fields  gt   login-bottom input login-remember     float  left    margin-right  3px     spacer     padding-bottom  10px    input type text   input type password      width  100     height  30px    padding  5px 10px    background-color  rgb 215  215  215     line-height  20px    font-size  12px    color  rgb 136  136  136     border-radius  2px 2px 2px 2px    border  1px solid rgb 114  114  114     box-shadow  0 1px 0 rgba 24  24  24  0 1     box-sizing  border-box    input type text  hover  input type password  hover  label hover   input type text   label hover   input type password      background  rgb 242  242  242      important    input type submit  hover     box-shadow  inset 0 1px 0 rgba 255  255  255  0 3   inset 0 -10px 10px rgba 255  255  255  0 1      login-top     height  auto   85px       login-bottom     padding  35px 15px 0 0    x000D   lt div id  mainContainer  gt     lt div id  login  class  loginForm  gt       lt div class  login-top  gt       lt  div gt       lt form class  login-fields  onsubmit  alert  test    return false   gt         lt div id  login-email  class  login-field  gt           lt label for  email  style  -moz-user-select  none -webkit-user-select  none   onselectstart  return false   gt E-mail address lt  label gt           lt span gt  lt input name  email  id  email  type  text    gt  lt  span gt         lt  div gt         lt div class  spacer  gt  lt  div gt         lt div id  login-password  class  login-field  gt           lt label for  password  style  -moz-user-select  none -webkit-user-select  none   onselectstart  return false   gt Password lt  label gt           lt span gt  lt input name  password  id  password  type  password    gt  lt  span gt         lt  div gt         lt div class  login-bottom  gt           lt input type  checkbox  name  remember  id  login-remember    gt           lt label for  login-remember  style  -moz-user-select  none -webkit-user-select  none   onselectstart  return false   gt Remember my email lt  label gt           lt input type  submit  name  login-button  id  login-button normal  style  cursor  pointer  value  Log in    gt         lt  div gt       lt  form gt     lt  div gt   lt  div gt  x000D   x000D   x000D    Alternatively  rather than adding padding to the  lt input gt  elements themselves  style the  lt span gt  elements wrapping the inputs  That way  the  lt input gt  elements can be set to width 100  without being affected by any additional padding  Example below   x000D   x000D   login-form     font-family   Helvetica Neue   Helvetica  Arial  sans-serif    background-color  rgba 0  50  94  0 2     margin  20px auto    padding  10px 15px 25px 15px    border  4px solid rgb 40  40  40     box-shadow  0 5px 10px 5px rgba 0  0  0  0 2     border-radius  2px    width  320px    label span     display  block    padding   3em 1em    background-color  rgb 215  215  215     border-radius   25em    border  1px solid rgb 114  114  114     box-shadow  0 1px 0 rgba 24  24  24  0 1     margin  0 0 1em    label span hover     background  rgb 242  242  242     box-shadow  inset 0 1px 0 rgba 255  255  255  0 3   inset 0 -10px 10px rgba 255  255  255  0 1     input type text   input type password      background  none    border  none    width  100     height  2em    line-height  2em    font-size  12px    color  rgb 136  136  136     outline  none     login-bottom     margin  2em 1em 0 0    input login-button     float  right    padding  2px 25px    input login-remember     float  left    margin-right  3px    x000D   lt form id  login-form  gt     lt label gt E-mail address      lt span gt  lt input name  email  type  text    gt  lt  span gt     lt  label gt     lt label gt Password      lt span gt  lt input name  password  type  password    gt  lt  span gt     lt  label gt     lt div class  login-bottom  gt       lt label gt         lt input type  checkbox  name  remember  id  login-remember    gt Remember my email      lt  label gt       lt input type  submit  name  login-button  id  login-button  value  Log in    gt     lt  div gt   lt  form gt  x000D   x000D   x000D

User · Answer

Padding is added to the overall width  Because your container has a pixel width  you are better off giving the inputs a pixel width too  but remember to remove the padding and border from the width you set to avoid the same issue

User · Answer

Padding is essentially added to the width  therefore when you say width 100  and padding  5px 10px you re actually adding 20px to the 100  width

User · Answer

I tried these solutions but never got a conclusive result  In the end I used proper semantic markup with a fieldset  It saved having to add any width calculations and any box-sizing   It also allows you to set the form width as you require and the inputs remain within the padding you need for your edges   In this example I have put a border on the form and fieldset and an opaque background on the legend and fieldset so you can see how they overlap and sit with each other    lt html gt     lt head gt     lt style gt      form         width  300px        margin  0 auto        border  1px solid            fieldset         border  0        margin  0        padding  0 20px 10px        border  1px solid blue        background  rgba 0 0 0  2             legend         background  rgba 0 0 0  2         width  100         margin  0 -20px        padding  2px 20px        color   col1        border  0            input type  email        input type  password        button         width  100         margin  0 0 10px        padding  0 10px            input type  email        input type  password           line-height  22px        font-size  16px            button       line-height  26px      font-size  20px           lt  style gt     lt  head gt     lt body gt     lt form gt         lt fieldset gt             lt legend gt Log in lt  legend gt             lt p gt You may need some content here  a message  lt  p gt             lt input type  email  id  email  name  email  placeholder  Email  value     gt             lt input type  password  id  password  name  password  placeholder  password  value     gt             lt button type  submit  gt Login lt  button gt         lt  fieldset gt     lt  form gt     lt  body gt   lt  html gt

User · Answer

Try changing the box-sizing to border-box  The padding is adding to width of your input elements   See Demo here  CSS  input type text   input type password        width  100       margin-top  5px      height  25px             input       box-sizing  border-box       box-sizing

User · Answer

The other answers seem to tell you to hard-code the width or use a browser-specific hack  I think there is a simpler way    By calculating the width and subtracting the padding  which causes the field overlap   The 20px comes from 10px for left padding and 10px for right padding   input type text   input type password                width  calc 100  - 20px

[css] CSS Input with width: 100% goes outside parent's bound

Examples related to css

Examples related to forms

Examples related to input

Examples related to width