How can I make a TextArea 100 width without overflowing when padding is present in CSS

Question

I have the following CSS and HTML snippet being rendered    x000D   x000D  textarea x000D    x000D    border 1px solid  999999  x000D    width 100   x000D    margin 5px 0  x000D    padding 3px  x000D    x000D   lt div style  display  block   id  rulesformitem  class  formitem  gt  x000D     lt label for  rules  id  ruleslabel  gt Rules  lt  label gt  x000D     lt textarea cols  2  rows  10  id  rules   gt  x000D   lt  div gt  x000D   x000D   x000D    Is the problem is that the text area ends up being 8px wider  2px for border   6px for padding  than the parent   Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent

User · Answer

let s consider the final output rendered to the user of what we want to achieve  a padded textarea with both a border and a padding  which characteristics are that being clicked they pass the focus to our textarea  and the advantage of an automatic 100  width typical of block elements   The best approach in my opinion is to use low level solutions as far as possible  to reach the maximum browsers support  In this case the only HTML could work fine  avoiding the use of Javascript  which anyhow we all love    The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to  Its default style is the one of inline elements  so  giving to the label a block display style we can avail ourselves of the automatic 100  width including padding and borders  while the inner textarea has no border  no padding and a 100  width   Taking a look at the W3C specifics other advantages we may notice are    no  for  attribute is needed  when a LABEL tag contains the target input  it automatically focuses the child input when clicked  if an external label for the textarea has already been designed  no conflicts occur  since a given input may have one or more labels    See W3C specifics for more detailed information   Simple example    x000D   x000D   container    x000D    width  400px   x000D    border  3px  x000D    solid  f7c   x000D      x000D   textareaContainer   x000D   display  block  x000D   border  3px solid  38c  x000D   padding  10px  x000D      x000D  textarea    x000D    width  100    x000D    margin  0   x000D    padding  0   x000D    border-width  0   x000D      x000D   lt body gt  x000D   lt div class  container  gt  x000D   I am the container x000D    lt label class  textareaContainer  gt  x000D     lt textarea name  text  gt I am the padded textarea with a styled border    lt  textarea gt  x000D    lt  label gt  x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    The padding and border of the  textareaContainer elements are the ones we want to give to the textarea  Try editing them to style it as you want  I gave large and visible padding and borders to the  textareaContainer element to let you see their behaviour when clicked

User · Answer

let s consider the final output rendered to the user of what we want to achieve  a padded textarea with both a border and a padding  which characteristics are that being clicked they pass the focus to our textarea  and the advantage of an automatic 100  width typical of block elements   The best approach in my opinion is to use low level solutions as far as possible  to reach the maximum browsers support  In this case the only HTML could work fine  avoiding the use of Javascript  which anyhow we all love    The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to  Its default style is the one of inline elements  so  giving to the label a block display style we can avail ourselves of the automatic 100  width including padding and borders  while the inner textarea has no border  no padding and a 100  width   Taking a look at the W3C specifics other advantages we may notice are    no  for  attribute is needed  when a LABEL tag contains the target input  it automatically focuses the child input when clicked  if an external label for the textarea has already been designed  no conflicts occur  since a given input may have one or more labels    See W3C specifics for more detailed information   Simple example    x000D   x000D   container    x000D    width  400px   x000D    border  3px  x000D    solid  f7c   x000D      x000D   textareaContainer   x000D   display  block  x000D   border  3px solid  38c  x000D   padding  10px  x000D      x000D  textarea    x000D    width  100    x000D    margin  0   x000D    padding  0   x000D    border-width  0   x000D      x000D   lt body gt  x000D   lt div class  container  gt  x000D   I am the container x000D    lt label class  textareaContainer  gt  x000D     lt textarea name  text  gt I am the padded textarea with a styled border    lt  textarea gt  x000D    lt  label gt  x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    The padding and border of the  textareaContainer elements are the ones we want to give to the textarea  Try editing them to style it as you want  I gave large and visible padding and borders to the  textareaContainer element to let you see their behaviour when clicked

User · Answer

If you re not too bothered about the width of the padding  this solution will actually keep the padding in percentages too    textarea       border 1px solid  999999      width 98       margin 5px 0      padding 1       Not perfect  but you ll get some padding and the width adds up to 100  so its all good

User · Answer

x000D   x000D      x000D      box-sizing  border-box  x000D    x000D   x000D   container   x000D      border-radius  5px  x000D      background-color   f2f2f2  x000D      padding  20px  x000D    x000D   x000D     Clear floats after the columns    x000D   row after   x000D      content      x000D      display  table  x000D      clear  both  x000D    x000D   x000D  input type text   select  textarea  x000D      width  100   x000D      padding  12px  x000D      border  1px solid  ccc  x000D      border-radius  4px  x000D      box-sizing  border-box  x000D      resize  vertical  x000D    x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt label for  name  gt Name lt  label gt  x000D       lt input type  text  id  name  name  name  placeholder  Your name    gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt label for  country  gt Country lt  label gt  x000D       lt select id  country  name  country  gt  x000D         lt option value  australia  gt UK lt  option gt  x000D         lt option value  canada  gt USA lt  option gt  x000D         lt option value  usa  gt RU lt  option gt  x000D       lt  select gt  x000D     lt  div gt      x000D     lt div class  row  gt  x000D       lt label for  subject  gt Subject lt  label gt  x000D       lt textarea id  subject  name  subject  placeholder  Write something    style  height 200px  gt  lt  textarea gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you pad and offset it like this   textarea       border 1px solid  999999      width 100       padding  7px 0 7px 7px       position relative  left -8px     1px border  too        the right side of the textarea perfectly aligns with the right side of the container  and the text inside the textarea aligns perfectly with the body text in the container    and the left side of the textarea  sticks out  a bit  it s sometimes prettier

User · Answer

If you re not too bothered about the width of the padding  this solution will actually keep the padding in percentages too    textarea       border 1px solid  999999      width 98       margin 5px 0      padding 1       Not perfect  but you ll get some padding and the width adds up to 100  so its all good

User · Answer

No  you cannot do that with CSS  That is the reason Microsoft initially introduced another  and maybe more practical box model  The box  model that eventually won  makes it inpractical to mix percentages and units    I don t think it is OK with you to express padding and border widths in percentage of the parent too

User · Answer

Why not forget the hacks and just do it with CSS   One I use frequently    boxsizingBorder       -webkit-box-sizing  border-box         -moz-box-sizing  border-box              box-sizing  border-box      See browser support here

User · Answer

x000D   x000D      x000D      box-sizing  border-box  x000D    x000D   x000D   container   x000D      border-radius  5px  x000D      background-color   f2f2f2  x000D      padding  20px  x000D    x000D   x000D     Clear floats after the columns    x000D   row after   x000D      content      x000D      display  table  x000D      clear  both  x000D    x000D   x000D  input type text   select  textarea  x000D      width  100   x000D      padding  12px  x000D      border  1px solid  ccc  x000D      border-radius  4px  x000D      box-sizing  border-box  x000D      resize  vertical  x000D    x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt label for  name  gt Name lt  label gt  x000D       lt input type  text  id  name  name  name  placeholder  Your name    gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt label for  country  gt Country lt  label gt  x000D       lt select id  country  name  country  gt  x000D         lt option value  australia  gt UK lt  option gt  x000D         lt option value  canada  gt USA lt  option gt  x000D         lt option value  usa  gt RU lt  option gt  x000D       lt  select gt  x000D     lt  div gt      x000D     lt div class  row  gt  x000D       lt label for  subject  gt Subject lt  label gt  x000D       lt textarea id  subject  name  subject  placeholder  Write something    style  height 200px  gt  lt  textarea gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I was looking for an inline-styling solution instead of CSS solution  and this is the best I can go for a responsive textarea    lt div style  width  100   max-width  500px   gt     lt textarea style  width  100    gt  lt  textarea gt   lt  div gt

User · Answer

How about negative margins   textarea       border 1px solid  999999      width 100       margin 5px -4px     4px   border padding on one side        padding 3px

User · Answer

The answer to many CSS formatting problems seems to be  add another  lt div     So  in that spirit  have you tried adding a wrapper div to which the border padding are applied and then putting the 100  width textarea inside of that   Something like  untested     x000D   x000D  textarea x000D    x000D    width 100   x000D    x000D   textwrapper x000D    x000D    border 1px solid  999999  x000D    margin 5px 0  x000D    padding 3px  x000D    x000D   lt div style  display  block   id  rulesformitem  class  formitem  gt  x000D     lt label for  rules  id  ruleslabel  gt Rules  lt  label gt  x000D     lt div class  textwrapper  gt  lt textarea cols  2  rows  10  id  rules   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I came across another solution here that is so simple  add padding-right to the textarea s container  This keeps the margin  border  and padding on the textarea  which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea   The container s padding-right should be the sum of the effective margin  border  and padding on both sides of the textarea  plus any padding you may otherwise want for the container  So  for the case in the original question   textarea      border 1px solid  999999      width 100       margin 5px 0      padding 3px     textareacontainer      padding-right  8px     1   3   3   1           lt div class  textareacontainer  gt       lt textarea gt  lt  textarea gt   lt  div gt

User · Answer

For people who use Bootstrap  textarea form-control can lead to textarea sizing issues as well  Chrome and Firefox appear to use different heights with the following Bootstrap CSS   textarea form-conrtol      height auto

User · Answer

No  you cannot do that with CSS  That is the reason Microsoft initially introduced another  and maybe more practical box model  The box  model that eventually won  makes it inpractical to mix percentages and units    I don t think it is OK with you to express padding and border widths in percentage of the parent too

User · Answer

Use box sizing property   -moz-box-sizing border-box   -webkit-box-sizing border-box   box-sizing border-box    That will help

User · Answer

The answer to many CSS formatting problems seems to be  add another  lt div     So  in that spirit  have you tried adding a wrapper div to which the border padding are applied and then putting the 100  width textarea inside of that   Something like  untested     x000D   x000D  textarea x000D    x000D    width 100   x000D    x000D   textwrapper x000D    x000D    border 1px solid  999999  x000D    margin 5px 0  x000D    padding 3px  x000D    x000D   lt div style  display  block   id  rulesformitem  class  formitem  gt  x000D     lt label for  rules  id  ruleslabel  gt Rules  lt  label gt  x000D     lt div class  textwrapper  gt  lt textarea cols  2  rows  10  id  rules   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For people who use Bootstrap  textarea form-control can lead to textarea sizing issues as well  Chrome and Firefox appear to use different heights with the following Bootstrap CSS   textarea form-conrtol      height auto

User · Answer

This code works for me with IE8 and Firefox   lt td gt       lt textarea style  width 100   rows 3 name  abc  gt Modify width   accordingly lt  textarea gt   lt  td gt

User · Answer

This code works for me with IE8 and Firefox   lt td gt       lt textarea style  width 100   rows 3 name  abc  gt Modify width   accordingly lt  textarea gt   lt  td gt

User · Answer

I often fix that problem with calc    You just give the textarea a width of 100  and a certain amount of padding  but you have to subtract the total left and right padding of the 100  width you have given to the textarea   textarea       border  0px      width  calc 100  -10px       padding  5px       Or if you want to give the textarea a border   textarea       border  1px      width  calc 100  -12px      plus the total left and right border        padding  5px

User · Answer

I was looking for an inline-styling solution instead of CSS solution  and this is the best I can go for a responsive textarea    lt div style  width  100   max-width  500px   gt     lt textarea style  width  100    gt  lt  textarea gt   lt  div gt

User · Answer

If you re not too bothered about the width of the padding  this solution will actually keep the padding in percentages too    textarea       border 1px solid  999999      width 98       margin 5px 0      padding 1       Not perfect  but you ll get some padding and the width adds up to 100  so its all good

User · Answer

You can make use of the box-sizing property  it s supported by all the main standard-compliant browsers and IE8   You still will need a workaround for IE7 though  Read more here

User · Answer

I came across another solution here that is so simple  add padding-right to the textarea s container  This keeps the margin  border  and padding on the textarea  which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea   The container s padding-right should be the sum of the effective margin  border  and padding on both sides of the textarea  plus any padding you may otherwise want for the container  So  for the case in the original question   textarea      border 1px solid  999999      width 100       margin 5px 0      padding 3px     textareacontainer      padding-right  8px     1   3   3   1           lt div class  textareacontainer  gt       lt textarea gt  lt  textarea gt   lt  div gt

User · Answer

If you re not too bothered about the width of the padding  this solution will actually keep the padding in percentages too    textarea       border 1px solid  999999      width 98       margin 5px 0      padding 1       Not perfect  but you ll get some padding and the width adds up to 100  so its all good

User · Answer

No  you cannot do that with CSS  That is the reason Microsoft initially introduced another  and maybe more practical box model  The box  model that eventually won  makes it inpractical to mix percentages and units    I don t think it is OK with you to express padding and border widths in percentage of the parent too

User · Answer

I often fix that problem with calc    You just give the textarea a width of 100  and a certain amount of padding  but you have to subtract the total left and right padding of the 100  width you have given to the textarea   textarea       border  0px      width  calc 100  -10px       padding  5px       Or if you want to give the textarea a border   textarea       border  1px      width  calc 100  -12px      plus the total left and right border        padding  5px

User · Answer

No  you cannot do that with CSS  That is the reason Microsoft initially introduced another  and maybe more practical box model  The box  model that eventually won  makes it inpractical to mix percentages and units    I don t think it is OK with you to express padding and border widths in percentage of the parent too

User · Answer

The answer to many CSS formatting problems seems to be  add another  lt div     So  in that spirit  have you tried adding a wrapper div to which the border padding are applied and then putting the 100  width textarea inside of that   Something like  untested     x000D   x000D  textarea x000D    x000D    width 100   x000D    x000D   textwrapper x000D    x000D    border 1px solid  999999  x000D    margin 5px 0  x000D    padding 3px  x000D    x000D   lt div style  display  block   id  rulesformitem  class  formitem  gt  x000D     lt label for  rules  id  ruleslabel  gt Rules  lt  label gt  x000D     lt div class  textwrapper  gt  lt textarea cols  2  rows  10  id  rules   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can make use of the box-sizing property  it s supported by all the main standard-compliant browsers and IE8   You still will need a workaround for IE7 though  Read more here

User · Answer

How about negative margins   textarea       border 1px solid  999999      width 100       margin 5px -4px     4px   border padding on one side        padding 3px

User · Answer

Use box sizing property   -moz-box-sizing border-box   -webkit-box-sizing border-box   box-sizing border-box    That will help

User · Answer

Why not forget the hacks and just do it with CSS   One I use frequently    boxsizingBorder       -webkit-box-sizing  border-box         -moz-box-sizing  border-box              box-sizing  border-box      See browser support here

User · Answer

The answer to many CSS formatting problems seems to be  add another  lt div     So  in that spirit  have you tried adding a wrapper div to which the border padding are applied and then putting the 100  width textarea inside of that   Something like  untested     x000D   x000D  textarea x000D    x000D    width 100   x000D    x000D   textwrapper x000D    x000D    border 1px solid  999999  x000D    margin 5px 0  x000D    padding 3px  x000D    x000D   lt div style  display  block   id  rulesformitem  class  formitem  gt  x000D     lt label for  rules  id  ruleslabel  gt Rules  lt  label gt  x000D     lt div class  textwrapper  gt  lt textarea cols  2  rows  10  id  rules   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you pad and offset it like this   textarea       border 1px solid  999999      width 100       padding  7px 0 7px 7px       position relative  left -8px     1px border  too        the right side of the textarea perfectly aligns with the right side of the container  and the text inside the textarea aligns perfectly with the body text in the container    and the left side of the textarea  sticks out  a bit  it s sometimes prettier

[html] How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Examples related to html

Examples related to css

Examples related to stylesheet