Extra Space Between inline-block DIV Elements
13:43 02 Dec 2013

I am creating a fluid layout using the CSS column layout module and am seeing unexpected results when 2 or more elements are in the same 'row' of a column. A 3 to 4 px gap will appear between the elements. I've tested in IE11, FireFox 24, Chrome 31, and Safari 5.1.7 and they all exhibit the same behavior.

.tile-container {
    -moz-column-width: 250px;
    -webkit-column-width: 250px;
    column-width: 250px;
    column-fill: auto;
    height: 502px;
    background-color: gray;
}

.tile-large {
    width: 250px;
    height: 250px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: green;
}

.tile-wide {
    width: 250px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: blue;
}

.tile-small {
    width: 125px;
    height: 125px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    display: inline-block;
    background-color: red;
}

    
1

    
2

    
3

    
4

    
5

    
6

    
7

    
8

I don't want to start using negative margins to close the gap as I want to introduce drag/drop behavior. Float left will remove the gap, but that introduces another set of issues. Oddly enough, when I use jQueryUI sortable, after the drop event and jQueryUI arranges the elements, the gap is no longer there.

html css