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>

For reference, see [What does the CSS rule clear: both do?](http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do). — showdev, Jul 07 '16 at 17:56
actually no need to clear, because OP is using `inline-block` in the same rule — dippas, Jul 07 '16 at 17:58
@thekkm13 you went for the not so good approach, against the easiest/better one? — dippas, Jul 07 '16 at 18:36
@dippas I really liked your answer as well and it's probably the better one or maybe even more correct. The only reason I went with the other answer is because I wasn't sure what the box-sizing does (I'm sorry, I'm still very new to html-css) and the other answer had me only adding one line to my existing code. — thekkm13, Jul 07 '16 at 19:51
@dippas That being said, I definitely intend to get home today and have a look at what box-sizing: border-box does and if it is a better solution to my problem, when I have some free time. — thekkm13, Jul 07 '16 at 19:52
if is only because of that, here is it https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing, I can add that to my answer — dippas, Jul 07 '16 at 19:52

dippas · Answer 1 · 2016-07-07T18:11:55.043

your issue

you are using float:left

explanation + usual solution

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

Because it is taken out of the normal flow you need to clear it, using clear property.

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

specific solution for your problem

if you are using inline-block, you don't need float:left, because inline-block makes the element a block level element and float:left makes the element a block element as well.

Therefore no need to clear anything.

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.wrap {
  margin-left: 2em
}
.abbr {
  display: inline-block;
  width: calc(100%/3);
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 0;
  font-weight: 700
}
.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;
}

<div class="wrap">
  <p class="abbr">Line 1</p><!--
--><p class="abbr">Line 2</p><!--
--><p class="abbr">Line 3</p>
</div>
<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>

I think it would be helpful to include an explanation of why the OP's issue is happening, in addition to your alternative (and arguably simpler) method. — showdev, Jul 07 '16 at 18:03

score 1 · Answer 2 · answered Jul 07 '16 at 17:45

You can try this way to clear the float.

body {
 margin:0;
 padding:0;
}
.content {
 display:inline-block;
 width:100%;
}
.content p {
 float:left;
 width:28%;
 text-align: center;
 background-color: white;
 border: 2px solid black;
 margin: 15px 2%;
 font-weight: bold;
}
.disc {
 width:96%;
 margin:2em auto 0 auto;
 border: 2px solid black;
 text-align: center;
 background-color: white;
}
#discHeader {
 font-weight: bold;
}
#discHeaderLine {
 border-top: 2px solid black;
}

<div class="content">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
</div>
<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>

score 0 · Accepted Answer · answered Jul 07 '16 at 17:53

0

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>

answered Jul 07 '16 at 17:53

Johannes

64,305
18
73
130

Worked fine after adding clear: both. Thank you so much! One additional minor issue - I'm specifying margins top and left for the p elements and the disc div, but there is no vertical spacing between the p blocks and the div. I can workaround by adding margin-bottom for the p blocks, but not sure why the margin-top for the div didn't create the gap in the first place. – thekkm13 Jul 07 '16 at 18:29
It has to do with the float status - the "clear" element obviously ignores margin-top below floated elements. In general I would recommend to erase the float and clear settings completely - it will work as you want it since you already made the `p` elements inline-blocks with a definied width, which is kind of similar to the float behaviour (exception: there will never be two elements beside one other element, which is possible with float). If you do that, all margins will work as expected. – Johannes Jul 07 '16 at 21:38

div wrapping other content

3 Answers3

your issue

explanation + usual solution

specific solution for your problem