Child div crosses border of parent div

Question

I have multiple div elements in HTML which are nested within one another and are meant to form a frame around the entire document.

It seems like I am not fully grasping the styling properties (I am fairly new to CSS) since the right and bottom parts of the inner divs are actually extending beyond the parent div's dimensions.

@page {
  margin: 0cm;
  /* Set margin on each page */
}

html {
  height: 100%;
  width: 100%;
  padding: 5px;
}

.dina4frame {
  height: 1050px;
  width: 730px;
}

.bluethin {
  background-color: #0B233D;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 2px;
}

.white {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 5px;
}

.bluebig {
  background-color: #0B233D;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 5px;
}

.background {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  padding: 0px;
}

h2 {
  display: inline-block;
  margin-left: 10px;
}

<div class='dina4frame'>
  <div class='bluethin'>
    <div class='white'>
      <div class='bluebig'>
        <div class='white'>
          <div class='bluethin'>
            <div class='background'>


              <body>

                <h2>Title</h2>

                <div>This is some test text.</div>


              </body>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</html>

I expected to have each inner div lying fully within but also fully fill the respective outer one (the 100% height and width properties) and the padding properties making sure there is enough of the outer div to see to make it look like a frame around the entire document.

As can be seen from the example, this works on the top and left side but not on the right and bottom, as the inner divs are extending beyond their parents. I tried playing with the height and width percentage but this yields frames which are too big since not controlled by the absolute padding property. And I am sure there must be a very simple and elegant solution to my problem.

What I want is a thin blue line (2px) around the whole document (it's meant to be printed on Din A4 later on) with a distance of 5px to the document's edges, followed by a white area of 5px but not overlapping the thin blue line. Next comes a big blue line (5px), similar to the thin one, always keeping a 5px distance to the edges of the white div it sits in. And so on and so forth.

Please use a [Markup Validator](https://validator.w3.org/) your HTML markup is invalid. `body` has to be a direct child of the `html` tag and can not be placed inside a div. also it is invalid to place a div outside of the body. — tacoshy, Aug 10 '22 at 13:07

score 1 · Accepted Answer · answered Aug 10 '22 at 13:05

This happens because your paddings are added to the total width of your elements within the div. This causes the elements to have a width > 100%.

You can fix this by adding the following css rules

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

This article has some additional information on the topic.

Child div crosses border of parent div

1 Answers1