The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems with Firefox columns

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #40489

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

    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'>
    .main-img-wrapper {float:left}
    .cols {
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.