Css Columns Vertical Alignment In Chrome

With the following code:

<

Solution 1:

It looks like the issue is with the user agent stylesheet used by Webkit.

For reasons like this, it's always best to use a good reset stylesheet, so that all browsers start on the same footing, and then style from there.

Here is your example with a CSS reset stylesheet: http://jsfiddle.net/euw72/

Solution 2:

I have gone through your problem and find a solution why you are getting the problem in chrome.

Please add this css to the ul tag:

<ulstyle="margin:0;"><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>

I hope it will solve your problem.

OPEN SCREENSHOT IN NEW WINDOW FOR CLARITY

Above is the screen shot of different images of google chrome (different window sizes), you can see 1st image is your screenshot & the output of you code in google chrome in which i added three different colored borders to demonstrate the problem.

1. Border red on div.
2. Pink on ul
3. Green on li

After adding margin:0; on ul you can see different output in different viewport sizes.

Share