How to make an element width 100 minus padding

Question

I have an html input   The input has padding  5px 10px  I want it to be 100  of the parent div s width which is fluid    However using width  100   causes the input to be 100    20px how can I get around this   Example

User · Answer

Move the input box  padding to a wrapper element    lt style gt  div outer  background  red  padding  10px    div inner   border  1px solid  888  padding  5px 10px  background  white    input   width  100   border  none    lt  style gt    lt div class  outer  gt       lt div class  inner  gt          lt input  gt       lt  div gt   lt  div gt    See example here  http   jsfiddle net L7wYD 1

User · Answer

Try this   width  100   box-sizing  border-box

User · Answer

Use css calc    Super simple and awesome   input       width  -moz-calc 100  - 15px       width  -webkit-calc 100  - 15px       width  calc 100  - 15px        As seen here  Div width 100  minus fixed amount of pixels  By webvitaly  https   stackoverflow com users 713523 webvitaly  Original source  http   web-profile com ua css dev css-width-100prc-minus-100px   Just copied this over here  because I almost missed it in the other thread

User · Answer

Here is the recommendation from codeontrack com  which has good solution examples      Instead of setting the width of the div to 100   set it to auto  and be sure  that the  lt div gt  is set to display  block  default for  lt div gt

User · Answer

Use padding in percentages too and remove from the width    padding  5   width  90

User · Answer

box-sizing  border-box is a quick  easy way to fix it   This will work in all modern browsers  and IE8    Here s a demo  http   jsfiddle net thirtydot QkmSk 301    content       width  100       box-sizing  border-box      The browser prefixed versions  -webkit-box-sizing  etc   are not needed in modern browsers

User · Answer

Assuming i m in a container with 15px padding  this is what i always use for the inner part   width auto  right 15px  left 15px    That will stretch the inner part to whatever width it should be less the 15px either side

User · Answer

You can try some positioning tricks  You can put the input in a div with position  relative and a fixed height  then on the input have position  absolute  left  0  right  0   and any padding you like   Live example

User · Answer

Just understand the difference between width auto  and width 100   Width auto  will  AUTO MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding  Width 100  expands the width and adds the padding

User · Answer

You can do it without using box-sizing and not clear solutions like width  99    Demo on jsFiddle     Keep input s padding and border Add to input negative horizontal margin   border-width   horizontal padding Add to input s wrapper horizontal padding equal to margin from previous step   HTML markup    lt div class  input wrap  gt       lt input type  text    gt   lt  div gt    CSS   div       padding  6px 10px     equal to negative input s margin for mimic normal  div  box-sizing       input       width  100      force to expand to container s width         padding  5px 10px      border  none      margin  0 -10px     negative margin   border-width   horizontal padding

User · Answer

This is why we have box-sizing in CSS   I   ve edited your example  and now it works in Safari  Chrome  Firefox  and Opera  Check it out  http   jsfiddle net mathias Bupr3  All I added was this   input     -webkit-box-sizing  border-box       -moz-box-sizing  border-box            box-sizing  border-box      Unfortunately older browsers such as IE7 do not support this  If you   re looking for a solution that works in old IEs  check out the other answers

User · Answer

You can do this   width  auto  padding  20px

User · Answer

For me  using margin 15px padding 10px 0 15px 23px width 100   the result was this     The solution for me was to use width auto instead of width 100   My new code was   margin 15px padding 10px 0 15px 23px width auto  Then the element aligned properly

User · Answer

What about wrapping it in a container  Container shoud have style like         width 100       border  10px solid transparent

[html] How to make an element width: 100% minus padding?

Examples related to html

Examples related to css

Examples related to width

Examples related to fluid-layout