Question

I have a an outside div (in blue) and an inside div. I am not sure what it is having an effect on the adjacent div. Any ideas? Removing the content of the inside div causes it go back to normal.

EDIT #1

Here’s a new image and the css. It seems like the pairings-box is causing some vertical offset to take place.

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.wide-box {
    border: 1px solid blue;
    margin-top: 10px;
    min-height: 100px;
    width: 450px;
}

.clearfix {
    display: inline-block;
}
.pairings-box {
    border: 1px solid black;
    float: left;
    width: 300px;
}

<div class='wide-box clearfix'></div>

<div class='wide-box clearfix'></div>

<div class='wide-box clearfix'>
  <div class='pairings-box'>here is some text</div>
</div>

<div class='wide-box clearfix'></div>

Answer 1

I don’t believe the blue <div>s have a display: block; as you suggest. The displayed behaviour is normal for display: inline-block;.