Problems with Firefox columns

[joshuacook13]

Here is the link to my site that I’m building:

joshrcook.com/test

I’m having trouble getting the pictures to touch top and bottom without messing up firefox’s columns. I can float the images left, but that seems to break -moz-column-count. Any ideas?

Here is the CSS for the pictures (I would have put the html as well but it wasn’t displaying correctly):

#img-wrapper {
width: 960px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}

.photo {
width: auto;
position: relative;
width: 320px;
}

.photo a img.overlay {
position: absolute;
z-index: 10;
top: 0;
left: 0;
}

.photo a img.overlay1 {
left: 25%;
}

.photo a img.overlay2 {
left: 45%;
}

.photo a img.overlay3 {
left: 65%;
}

.photo img.main_photo {
width: 320px;
border-radius: 10px;
}

[Taufik Nurrohman]

Set in two columns, then float the image:

<div id='img-wrapper'>

<div class='main-img-wrapper'><img src=''></div>

<div class='cols'>

<div class='photo'>

<div class='photo'>

</div>

</div>

.main-img-wrapper {float:left}

.cols {

-webkit-column-count:2;

-moz-column-count:2;

column-count:2;

-webkit-column-gap:10px;

-moz-column-gap:10px;

column-gap:10px;

}

[Author]

Posts