(I've looked at some other questions like this on stack, particularly Extra space at the bottom of CSS columns, but I couldn't see the issue the asker was having in the fiddle he presented, and trying that solution didn't work anyways.)
Anyways, I have extra space added below my columns in a div with column-width applied. Here's a link to the an example. My issue is the extra blue space below any columns. When I remove one or another, it seems to settle. Can I have the container div shrink to only use as much space as is needed?
HTML:
<div class="columns">
<div class="font-console column_div">
<b>authors:</b>
<ul>
<li>author_name</li>
<li>author_id</li>
</ul>
</div>
<div class="font-console column_div">
<b>authors:</b>
<ul>
<li>author_name</li>
<li>author_id</li>
<li>checked_out</li>
<li>checked_out</li>
</ul>
</div>
<div class="font-console column_div">
<b>checkouts:</b>
<ul>
<li>checked_out</li>
<li>checked_in</li>
<li>checked_out</li>
<li>checked_in</li>
<li>checked_out</li>
<li>checked_in</li>
<li>checked_out</li>
<li>checked_in</li>
</ul>
</div>
<div class="font-console column_div">
<b>authors:</b>
<ul>
<li>author_name</li>
<li>author_id</li>
</ul>
</div>
<div class="font-console column_div">
<b>books:</b>
<ul>
<li>ttttttytytytytytytytytytytytytytytytytytytytytytytytytyty</li>
<li>author_id</li>
</ul>
</div>
</div>
CSS:
.columns {
-webkit-column-count: 3;
margin: 10px;
background-color: #0099ff;
}
.column_div {
-webkit-column-break-inside: avoid;
background-color: #ff9900;
display: block;
}
If you are talking about the blue space, it's because of the UL.
Just put margin:0 for the UL tag
.columns ul {
margin:0;
}