CSS Multi Column Layout Margin Issue

Question

I have a css based 2 column layout...

.mainContentSection {
  font-size: 1.1em;
  margin: 20px 10px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

.mainContentSection p {
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

Occasionally the top of the second column catches the margin from the bottom of the previous paragraph. This pushes down the top of the next paragraph as seen in the attached pic. I have tried break-inside, changing margins, inline-block. All have had some success, but not optimal. Can I access the second column to remove that margin?

Answer 1

I had the same issue with Safari. Adding display: inline-block on the columns items solved the problem for me.

Answer 2

The root of the issue appears to be when using column-count browsers treat margin and padding differently depending on whether there are an even or odd number of elements.

This means solutions like display: inline-block; width: 100%; or playing with margin or padding create inconsistent results.

Solution

The only way I found to make this consistently work across browsers is to add a parent-element and a spacer. Then use break-inside: avoid to keep the two elements together.

HTML

<div class="mainContentSection">
  <div class="parent-element">    <!-- added this element -->
    <p>Blah blah blah blah</p>
    <div class="spacer"></div>     <!-- added this element -->
  </div>
  <div class="parent-element">   
    <p>Blah2 blah2 blah2 blah2</p>
    <div class="spacer"></div>   
  </div>

  <!-- addition items... -->

</div>

CSS

.mainContentSection{
  column-count:2
}
.parent-element{
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.spacer{
  height: 10px;
}

You can add padding to mainContentSection or add another spacer above the paragraph depending where you need space.

Problem

The inconsistent alignment appears to be is driven by margin and padding being handled differently for an even or odd number of elements. I found this to be true for -top and -bottom but to keep things simple I only use margin-bottom in the example.

Even Number of Elements (works fine)

When there's an even number of elements margin-bottom works.

Odd Number of Elements (does not work)

When there's an odd number of elements margin-bottom gets moved to the second column creating the misalignment.

Other Solutions

This means that just playing with margin or padding leads to inconsistent results across browsers and devices.

Using display: inline-block; width:100% almost works but I found for some browser/device variations if there are only two elements it keeps the two elements in one column because there is no break. This can be addressed by adding a break as proposed here but as the user mentions it seems to have inconsistent results if element heights vary.