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.
The solution was to apply the follwing to the <li>
's:
display: inline-block;
width: 100%;
Hope this helps, someone else.
Related Topics
Ionic Item with Left and Right Aligned Text
What to Use Instead of Contains() in CSS3
How to Make Space Between Middle Line and Text
How Specify Two CSS Classes: from Property and Conditional Class
Why Do Checkboxes Move When Checked in Safari
Flex: Wrapped Items with Same Width as The Rest
Page Transitions Without React-Router
How to Add Media Attribute to ASP.NET Mvc4 Style Bundle
How to Make an <A> 100% Height of <Li>
How to Give Class to a Host Element in Angular 2 with @Hostbinding
Text Size for Drop Down Menu/Input Select Not Working in Safari
How to Use SASS Logic Within a CSS 3 Media Query
CSS Background Gradient with Offset
Resize Images as Viewport Resizes Without Sides Being Cut Off