Random white space after content (Webkit browser error)

Question

I got an unknown white space at the bottom of my service pages. I use column-count: 2;to split images between two columns.

Update: This is a Webkit Browser Problem

The problem is the extra space at the bottom of the column mainCont, on the left.

If all images are aligned, then there are about 30 pixels of unnecessary space. Although, if the images do not line up, then there are about 50-70 pixels of extra white space. I have 10px padding in the main containers, but I cannot find what creates the extra spacing.

Here is JSFIDDLE (remove / show in url to view code) to find out what the problem is. There is also a Live Site , so you can see how it affects each of the service pages.

CSS for the main container:

.mainCont {
    width: 100%;
    background: #f7f7f7;
    padding: 10px;
    position: relative;
    margin-top: 2.5%;
}

Edit

There is about 160pxextra space at the bottom minus 20px (mainCont and gridbox img is 20px in the add-on).

Answer 1

I have been doing research since birth.

• If the image sizes are equal, no problem in all browsers
• If the sizes of the images are different, additional space appears at the bottom of the page.

Chrome. - . .