The input with 100% width inside a div is overlapping the div

Question

I'm having a problem with margin in the input with width 100%, because it is overlapping the div container.

I looked for solutions on the forum, and the possible solution was to apply box-sizing: border-box, but it is not working.

Solution not working to me: CSS - Input at 100% width overlaps div

jsfiddle: https://jsfiddle.net/igorac1999/fuovpkba/

 html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body, pre { margin: 0; padding: 0; }.container { width: 100%; max-width: 980px; margin: 0 auto; }.container_calculator { width: 100%; max-width: 400px; background-color: tomato; border-radius: 5px; margin: 5px auto; }.container_calculator > label { display: inline-block; color: #fff; margin: 10px 0 0 20px; }.container_calculator > input { height: 20px; border: 1px solid tomato; border-radius: 5px; width: 100%; margin: 5px 20px; } div.result_bin2dec { border: 1px solid #edf2f7; background-color: #edf2f7; border-radius: 10px; margin-top: 30px; height: 35px; }

 <div class="container"> <div class="container_calculator"> <label>Number</label> <input type="text" id="number"> </div> <div class="result_bin2dec"> <pre> Dec: 10 Bin: 01 </pre> </div> </div>

enter image description here

Answer 1

instead margin on the children, you may use padding on the parent, so it can be included in box-sizing

---

as specified in the linked answer you said did not work for you, see below the link to specification of box-sizing to understand how it works and how to use it

---

possible example: https://jsfiddle.net/gr7cbevj/

 html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body, pre { margin: 0; padding: 0; }.container { width: 100%; max-width: 980px; margin: 0 auto; }.container_calculator { width: 100%; max-width: 400px; background-color: tomato; border-radius: 5px; margin: 5px auto; padding: 0 20px;/* added */ box-sizing: border-box;/* added */ }.container_calculator>label { display: inline-block; color: #fff; margin: 10px 0 0 0px;/* modified */ }.container_calculator>input { height: 20px; border: 1px solid tomato; border-radius: 5px; width: 100%; margin: 5px 0px;/* modified */ } div.result_bin2dec { border: 1px solid #edf2f7; background-color: #edf2f7; border-radius: 10px; margin-top: 30px; height: 35px; }

 <div class="container"> <div class="container_calculator"> <label>Number</label> <input type="text" id="number"> </div> <div class="result_bin2dec"> <pre> Dec: 10 Bin: 01 </pre> </div> </div>

see the use of box-sizing .

The box-sizing CSS property sets how the total width and height of an element is calculated.

Answer 2

You are adding 20px to the margin.

change your css for this element:

PREVIOUS:

.container_calculator > input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 20px;
}

NEW:

.container_calculator input {
  height: 20px;
  border: 1px solid tomato;
  border-radius: 5px;
  width: 100%;
  margin: 5px 0px;
}

Answer 3

Just insert padding to parent and remove margin in input and label.

.container_calculator {

   padding: 5px 20px;<-------------insert this line

   //Other codes...

}

.container_calculator > input {

  margin: 5px 20px;<--------------remove this

  //Other codes...

}

.container_calculator>label {

 margin: 10px 0 0 20px;<---------remove this

 //Other codes...

}

For space between input and label ,you can use of:

.container_calculator>input{

    margin-top:5px;

   //Other codes...

}

 html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body, pre { margin: 0; padding: 0; }.container { width: 100%; max-width: 980px; margin: 0 auto; }.container_calculator { width: 100%; max-width: 400px; background-color: tomato; border-radius: 5px; margin: 5px auto; padding: 5px 20px; }.container_calculator>label { display: inline-block; color: #fff; }.container_calculator>input { height: 20px; border: 1px solid tomato; border-radius: 5px; width: 100%; } div.result_bin2dec { border: 1px solid #edf2f7; background-color: #edf2f7; border-radius: 10px; margin-top: 30px; height: 35px; }

 <div class="container"> <div class="container_calculator"> <label>Number</label> <input type="text" id="number"> </div> <div class="result_bin2dec"> <pre> Dec: 10 Bin: 01 </pre> </div> </div>

Answer 4

I'm having a problem with margin in the input with width 100%, because it is overlapping the div container.

I looked for solutions on the forum, and the possible solution was to apply box-sizing: border-box, but it is not working.

Solution not working to me: CSS - Input at 100% width overlaps div

jsfiddle: https://jsfiddle.net/igorac1999/fuovpkba/

 html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body, pre { margin: 0; padding: 0; }.container { width: 100%; max-width: 980px; margin: 0 auto; }.container_calculator { width: 100%; max-width: 400px; background-color: tomato; border-radius: 5px; margin: 5px auto; }.container_calculator > label { display: inline-block; color: #fff; margin: 10px 0 0 20px; }.container_calculator > input { height: 20px; border: 1px solid tomato; border-radius: 5px; width: 100%; margin: 5px 20px; } div.result_bin2dec { border: 1px solid #edf2f7; background-color: #edf2f7; border-radius: 10px; margin-top: 30px; height: 35px; }

 <div class="container"> <div class="container_calculator"> <label>Number</label> <input type="text" id="number"> </div> <div class="result_bin2dec"> <pre> Dec: 10 Bin: 01 </pre> </div> </div>

enter image description here