Missing div borders

I need your help,

It seems that I am having some difficulty with attempting to add a div around a textarea inside a container div as well as a border for the div encompassing my button at the bottom of the container div.

First problem: the right side border is missing

Second problem, the 1px solid red is missing from the inner2 div.

Here is a pic of the problem and the desired result:

enter image description here

Desired result is:

enter image description here

Here is the HTML & CSS in question:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
    #container {
      text-align: center;
      width: 500px;
      border: 1px solid green;
    }
    #summary {
      width: 100%;
      height:100%;
      border: 0;
    }
    #inner1 {
      height: 500px;
    }
    #inner2 {
      border-top: 1px solid red;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="container">
  <div id='inner1'><textarea id="summary"></textarea></div>
  <div id="inner2"><input type="button" value="Close"></div>
  </div>
</body>
</html>

solution

It’s because the textarea element has default padding. Since padding isn’t included in an element’s width/height calculations, it overflows outside of the parent element because a width of 100% + the border is greater than the parent elements width.

You could either remove this padding, or include the padding in the dimension calculations by adding box-sizing: border-box to the textarea element:

#summary {
  width: 100%;
  height: 100%;
  border: 0;
  box-sizing: border-box;
}