Why Is My Multi-Column Spacing Not Working in Chrome

Why is my multi-column spacing not working in Chrome?

Give both the parent element (in the example, it's the body tag) and the "results" div a CSS style of position: relative. (Also, remove the position:absolute from the .results CSS.)

body, .results {
position: relative;
}

revised JSFiddle

In case body is not the parent element in your real use case, you just need a wrapper for the .results div with position:relative.

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/

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>

Three column layout doesn't work correctly in Google Chrome

Using position: absolute should really not use to build your main layout, it should be used mainly to position things precisely in your page like modal or dialog box.

You should use display: inline-block or CSS Grid or CSS Flexbox.

With CSS Grid, if you want to set up a 3-column layout, you can just use display: grid on your parent container and grid-template-columns: 1fr 1fr 1fr that create 3 columns instantly.

#container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;}
#column-1 { background-color: red;}#column-2 { background-color: blue;}#column-3 { background-color: yellow;}
<div id="container">  <div id="column-1">A</div>  <div id="column-2">B</div>  <div id="column-3">C</div></div>

Chrome bug? Content not rendering multi-columns properly

The temporary solution for this was adding transform: translateZ(0) to my .item element as this enable hardware acceleration.

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.

Column-count issue in chrome

The column rule break the element to adjust the height. In your case it happened. Fortunately, you can tell the browser to keep specific elements together with break-inside: avoid;.

At the moment, the property universally accepts the values auto and avoid.
Use avoid on an element within a multi-column layout to keep the property from breaking apart.

.grid-item { 
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

Problems with second column top spacing (css columns)

I have just hit this bug in Chrome.

With a little investigation, it seems the bottom of the last <li> in the first column gets placed at the top of the 2nd column.

CSS Column Bug

The solution was to apply the follwing to the <li>'s:

display: inline-block;
width: 100%;

Hope this helps, someone else.



Related Topics



Leave a reply



Submit