Grow your CSS skills. Land your dream job.

CSS DIV positioning

  • # December 10, 2012 at 5:49 pm

    Hi, Im_ having a bit of a challenge to display an image gallery in 4 columns in Chrome, Opera, Safari browsers. It seems that the .gallery block is having a left margin pushing it inwards. It perfectly works in Firefox. http://www.origin-designs.co.uk

    I played around with column count on 1280px media query, and it seems to be showing the right column count, but the images are not fitting so to speak inside those 5 or in (preferred) 4 columns. Any thoughts anyone? Thanks

    CSS:

    .gallery {
    width: 100%;
    }

    .gallery .gallery-item {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    color: #333;
    text-decoration: none;
    }

    .gallery .gallery-item img {
    max-width: 100%;
    height:auto;
    -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    -o-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
    background: #fff; /* Solid background color as a fallback for IE */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
    background: -moz-linear-gradient(top, #fff, #eee);
    background: -o-linear-gradient(top, #fff, #eee);
    background: linear-gradient(top, #fff, #eee);
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    }

    .gallery .gallery-item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .gallery .gallery-item:hover img,
    .gallery .gallery-item:focus img {
    -webkit-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    -o-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
    }

    @media only screen and (min-width : 481px) {
    .gallery {
    -moz-column-count: 2;
    -moz-column-gap: 15px;
    -webkit-column-count: 2;
    -webkit-column-gap: 15px;
    column-count: 2;
    column-gap: 15px;
    }
    }

    @media only screen and (min-width : 769px) {
    .gallery {
    -moz-column-count: 3;
    -moz-column-gap: 15px;
    -webkit-column-count: 3;
    -webkit-column-gap: 15px;
    column-count: 3;
    column-gap: 15px;
    }
    }

    @media only screen and (min-width: 1280px) {
    .gallery {
    -moz-column-count: 4;
    -moz-column-gap: 15px;
    -webkit-column-count: 4;
    -webkit-column-gap: 15px;
    column-count: 4;
    column-gap: 15px;
    }
    }

    Many thanks

# December 11, 2012 at 5:28 am

The problem is, you are using browser specific prefixes! The column selector and its properties are not yet standards, and you shouldn’t be using them for anything other than experimental testing, not on an actual site you intend to publish. The prefixes do work but not perfectly, otherwise you wouldn’t have appended all those prefixes to begin with. You can achieve the same results using absolute positioning along with percentage values for width, height, and position, without all the headaches. I’m glad to see people are putting this new technology to use though, but too much code!

# December 11, 2012 at 5:41 am

Using ‘unfinished’ properties such a column-count is always a risk until such time at they have matured but absolute positioning would be a horrible way to go for this interpretation.

At the moment I would suggest a simple grid such at the one Chris demonstrates here: http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

# December 11, 2012 at 6:25 am

Oh, thank you djdaniel150 and Paulie_D, its been interesting to see how css has been evoving. Will do simple percentage value with absolute positioning. Thanks again

# December 12, 2012 at 1:57 am

Your welcome linardzb! Yeah, I used absolute positioning to create the entire structure of every page on my newest website “pctechauthority”, it works great. Those percentage values are part of what makes this so flexible too. You can try using the “flexible box model” as well. Although its a little buggy and does require the use of browser specific prefixes. Nonetheless, it amazing what you can do with it. ELements can literally adapt to the viewing area regardless of the resolution at hand.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".