0

I have a multi-column div with paragraphs, and I need the last paragraph in any cluster of paragraphs to end with a space at the bottom. Currently, I achieve this with a margin-bottom on p and then an equal negative margin-top on p+p. This all works fine. Then, I add a column-spanning div below those paragraphs. For some reason, the spanner seems to ignore the margin-bottom of the paragraphs in column one, which means if the columns are unbalanced, my div ignores the spacing (and in fact is painted on top of the margin if you view it in the Chrome inspector), bunching up close to the paragraph above. Is there some clean solution to get consistent spacing? You can see this happening in the snippet here:

.container {
  column-count: 2;
  border: solid black 1px;
  width: 200px;
}

.spanner {
 background-color: #aaf;
 column-span : all;
}

p {
 margin-top   : 0px;
 margin-bottom: 20px;
 padding      : 5px;
 background-color : #ffa;
}

p+p {
 margin-top: -20px;
}
<b>Balanced columns are fine:<b>

<div class="container">
  <p>1 1 1 1 1 1 1 1 1 1 1</p>
  <p>2 2 2 2 2 2 2 2 2 2 2</p>
  <p>3 3 3 3 3 3 3 3 3 3 3</p>
  <p>4 4 4 4 4 4 4 4 4 4 4</p>
  <p>5 5 5 5 5 5 5 5 5 5 5</p>
  <p>6 6 6 6 6 6 6 6 6 6 6</p>

  <div class="spanner"> span the whole column, bro. </div>
</div>
<br>
<br>

<b>Unbalanced columns ruin my life:<b>

<div class="container">
  <p>1 1 1 1 1 1 1 1 1 1 1</p>
  <p>2 2 2 2 2 2 2 2 2 2 2</p>
  <p>3 3 3 3 3 3 3 3 3 3 3</p>
  <p>4 4 4 4 4 4 4 4 4 4 4</p>
  <p>5 5 5 5 5 5 5 5 5 5 5</p>

  <div class="spanner"> span the whole column, bro. </div>
</div>

Edit: Added additional context, because the proposed answers didn't quite solve the issue in my case.

Trevor Buckner
  • 588
  • 2
  • 13
  • Please checkout https://stackoverflow.com/questions/38020462/css-columns-and-margin-issue I think your only solution would be to add a margin bottom to container. And dont forget to bring the spinner out of the container. – Amin Darian Apr 03 '21 at 05:53
  • Thanks for the reply! However, the linked post seems to be a significantly different issue, and the fixes on that page do not work in this case. Unfortunately, inserting container objects is also not an option, as this content is generated dynamically from live user input, and I don't think developing separate JS logic to programmatically inject container objects around everything the user types in will be very clean (not to mention it contaminates the user input with divs they might not be expecting). :/ – Trevor Buckner Apr 03 '21 at 06:42

1 Answers1

0

This is chrome issue. It should work in firefox. Try below CSS for chrome :

.container {
  column-count: 2;
  border: solid black 1px;
}

.spanner {
 background-color: #aaf;
 column-span : all;
}

p {
 margin-top   : 0px;
 margin-bottom: 10px;
 padding      : 5px;
 background-color : #ffa;
 display: inline-block;
 width: 100%;
}

You can add margin-top to the div with spanner class to achieve your requirement.

.container {
  column-count: 2; 
  border: solid black 1px;
  width: 200px;
}

.spanner {
 background-color: #aaf;
 column-span : all;
 margin-top: 20px;
} 

p {
 margin-top   : 0px;
 margin-bottom: 0px;
 padding      : 5px;
background-color : #ffa;
}
Anjs
  • 586
  • 4
  • 11
  • Hey there! Please see my edited post. The `inline-block` fixed the issue as I had it written, but I realized I had some further context that caused it to not work in my actual project. Would you be interested in taking another look at it with the added details? – Trevor Buckner Apr 03 '21 at 21:51