Webkit CSS3 column adds an extra padding to its container.
css, html, multiple-columns, webkit
Solution
Try this CSS
#featured
{
overflow:hidden;
}
Problem
I've created a CSS3 multi column layout for image gallery which looks nice on Firefox. HTML : ``` <section id="featured"> <article> <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" /> </article> <article> <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" /> </article> <article> <img src="http://sheepy.me/incoming/images/posts/blog/thumb_hem-tourniquet.png" /> </article> <article> <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" /> </article> <article> <img src="http://sheepy.me/incoming/images/posts/blog/thumb_tim-burton-pokemans.png" /> </article> ``` css : ``` #featured { width: 730px; padding: 20px; -webkit-column-count: 2; -webkit-column-gap: 10px; -webkit-column-fill: balance; -moz-column-count: 2; -moz-column-gap: 10px; -moz-column-fill: balance; column-count: 2; column-gap: 10px; column-fill: balance; background: #7d90a5; } article { width: 300px; display: block; background: #344252; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 10px; width: 335px; margin-bottom: 20px; } article img{ width: 335px; display: block; } ``` The problem is, when I am using Chrome browser to open it up, it adds extra space at the bottom of the `<section>` which I have no idea to fix it. I've search the web and found this thread but I am not sure if it's the same issue. Check this fiddle link and try open using both Chrome and Firefox.