div wrapping other content

Question

I seem to have a problem with one div wrapping other content.

If I bring some additional HTML elements between the 3 p elements and the div, it works just fine.

However, when I place them as shown in the code below, it appears that the .discwraps the 3 p elements - i.e. they appear inside the div.

I had the 3 p elements in their own div as well, and yet, they would show up as part of the "disc" class.

Initially, I was specifying a complete all-round margin. Then, while looking for a cause to this problem, I came across collapsed margins. So, I've changed my margin to reflect only top and left values, but that doesn't seem to be solving the problem either.

Why is this happening?

.abbr {
  float: left;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 26px;
  font-weight: bold;
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

<p class="abbr">Line 1</p>
<p class="abbr">Line 2</p>
<p class="abbr">Line 3</p>

<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

Answer 1

Your abbr elements are floated. Add clear: both; to .disc:

.abbr {
  float: left;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 26px;
  font-weight: bold;
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
  clear: both;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

<p class="abbr">Line 1</p>
<p class="abbr">Line 2</p>
<p class="abbr">Line 3</p>

<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>