CSS Multi-Column Layout of List Items Doesn't Align Properly in Chrome

CSS multi-column layout of list items doesn't align properly in Chrome

You need each item in the column to be displayed as "inline-block". That will solve your problem without needing to use jQuery.

Additionally, each element can be specified to have width: 100% in order to get the them to use the full width of the rows.

Here is a working example:

$(document).ready(function() {    for( var i = 0; i < 24; i++ ) {        $("ul.newslist").append("<li><a href='#'>Item</a></li>");    }    $("ul.newslist > li").click(function() {        $(this).remove();    })});

ul.newslist {    columns: 5;    background-color: #ccc;    padding: 16px 0;    list-style: none;}
ul.newslist > li {    display: inline-block;    width: 100%;    border-top: 1px solid #000;}
ul.newslist > li > a {    display: block;    padding: 4px;    background-color: #f6b;    text-decoration: none;    color: inherit;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="newslist"></ul>

CSS Multi-column Layout - Chrome does not allow to have the right column longer than the left?

Try removing display: inline-block from .contentstrecke{ }. After that removal, Firefox and Chrome look identical.

Block Elements Inside Multicolumn Layout - Padding Issue In Chrome/IE

On the first JSFiddle, I found adding to the li

display: inline-block;
width: 100%;

Worked to align the elements and fill the column width.

Edit:

The above currently works in both Firefox and Chrome perfectly. On IE, I also have to set the li to box-sizing:border-box;, because specifying width while padding is specified causes an overflow otherwise. Link to updated version of the original Fiddle, now working in all major browsers:

http://jsfiddle.net/6cVqZ/40/

Is there a solution for CSS column breaks that works in both Firefox and Chrome

You could use flexbox to keep the children of .three_col in a single row like this:

.three_col {  display: flex;}.keep_together {  margin: 20px;  flex: 1;}

<div class="three_col"><div class="keep_together"><h2 style="color: #02b4f0;">Location 1</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p></div><div class="keep_together"><h2 style="color: #62bb47;">Location 2</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p></div><div class="keep_together"><h2 style="color: #ef3781;">Location 3</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p></div></div>

chrome and safari render css columns differently when number of items equals number of columns

I sorted this out, at least for Safari vs. Chrome.

Since this only applies when the number of items is equal to the number of columns, and since that number is known, I can apply display: inline-block; to li and then override that when the 2nd listing is also the last listing.

In my case, the solution is to add to the CSS:

li {
  display: inline-block; 
}

li:last-child:nth-child(2) {
  display: block;
}

Full CSS:

ul {
  moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
  column-gap: 2em;
}

li {
  display: inline-block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
  list-style-type:none;
  padding: 1em;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

li:last-child:nth-child(2) {
  display: block;
}

Chrome bug? CSS3 columns make an extra space on every new column

http://jsfiddle.net/WCP5f/3/

I switched the .huge-letter font-size to an EM instead of a PX value, and this seems to have fixed it.

CSS Multi-Column Layout of List Items Doesn't Align Properly in Chrome