1

We're building a website using the Bourbon Neat grid framework. It uses float: left for column placement.

Our site structure consists of rows which may contain one or more columns. If we only have one column, it is not floated and has 100% width. The content elements called components are placed inside columns that may or may not float.

Rows may have a white background color for highlighting purposes.

Components may have margin at their top and bottom, but not all components do. We're letting the margins collapse to preserve the vertical rhythm of the content without adding extraneous space around it.

Our problem is that floating elements create their own block formatting context, preventing their margins from collapsing. This causes columns to have gaps that look awkward. See the example:

Actual vs expected

The left side is what I get, the right side is what I want.

Is there some way we could cleanly circumvent this problem? Javascript solutions are fine if there is no pure CSS fix.

body {
  background-color: #ccc;
}

p {
  margin: 1em;
}

.column {
  float: left;
  width: 33%
}

.white {
  background-color: #fff;
  padding: 1px 0;
  
}

.white + .white {
  padding-top: 0;
  margin-top: -1em;
}
<div class="row">
  <div>
    <p>
      These two
    </p>  
  </div>
</div>
<div class="row">
  <p>
    should collapse
  </p>
</div>
<div class="row white">
  <p>
    This should not collapse
  </p>
</div>
<div class="row">
  <p>
    These two
  </p>
</div>
<div class="row">
  <p>
    should collapse
  </p>
</div>
<div class="row white">
  <p>
      These white ones
  </p>
</div>
<div class="row white">
  <p>
      should collapse
  </p>
</div>
<div class="row">
  <div>
    <p>
      These two rows
    </p>  
  </div>
</div>
<div class="row">
  <div class="column">  
    <p>
      should collapse
    </p>
  </div>
  <div class="column">  
    <p>
      vertically
    </p>
    <p>
      Also, the column
    </p>
    <p>
      contents should
    </p>
    <p>
      have margins
    </p>
    <p>
      that collapse
    </p>    
  </div>
  <div class="column">  
    <p>
      with floats
    </p>
  </div>
</div>
Kaivosukeltaja
  • 15,541
  • 4
  • 40
  • 70
  • Not very helpful for your Neat problem but try Jeet... it is way more concise and has more features than Neat. – Lowkase Jan 05 '16 at 14:58
  • Also, have you tried setting border-box globally? html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } – Lowkase Jan 05 '16 at 14:59
  • Yes, we have a global `box-sizing: border-box`. I'll check out Jeet, although it won't help us in this case since it also uses `float`. – Kaivosukeltaja Jan 05 '16 at 15:06
  • It's unclear what you're going to achieve. can you explain more, perhaps using images. – Stickers Jan 05 '16 at 15:07
  • A jsfiddle would be helpful as well. Not sure about jsfiddle but you can import the neat lib into Codepen. – Lowkase Jan 05 '16 at 15:09
  • I added a screenshot of the actual and desired result. The code snippet above works like jsfiddle/codepen, just click on "Run code snippet". – Kaivosukeltaja Jan 05 '16 at 15:19
  • added a codepen in my answer with side by side your code (padding :) ) and no padding to keep margins to collapse across divs http://codepen.io/anon/pen/GoWZzM – G-Cyrillus Jan 05 '16 at 15:40

0 Answers0