Get a free trial // Grow your CSS skills // Land your dream job

grid problem with images.

  • Abz
    # June 25, 2013 at 8:09 pm


    I’ve using the grid that Chris wrote about on this site.

    its working fine but with one problem. I have 4 columns with a div element and with an image.

    all columns have a padding right except the last one.

    If you look at

    the right div is bigger.

    the last column is now bigger. Any ways to get around this?

    Thank you :)

    # June 25, 2013 at 8:27 pm

    This is your issue:

    padding-right: 0px;

    # June 25, 2013 at 8:28 pm

    You need a “module” div to handle gutter:

    (or try an [alternative](

    # June 26, 2013 at 3:08 am

    I know what the issue is, the module ive used is “.work”. Just wondering if there’s any way around this?

    # June 26, 2013 at 4:18 am

    Okay so `.work` is your module but you still let the `col-` classes handle gutter, remove `padding-right` from them and add `margin: 0 10px;` to `.work`.

    # June 26, 2013 at 4:37 am

    I’ve added
    [class*=’col-‘] {
    float: left;
    padding-right: 10px;
    padding-left: 10px;

    and removed

    [class*=’col-‘]:last-of-type {
    padding-right: 0px;

    which works :)

    # June 26, 2013 at 5:41 am

    Oh yeah, that would work as long as you don’t nest columns. `padding: 0 10px;` is the same as `padding-right: 10px; padding-left: 10px;` (assuming top and left is 0), but a lot shorter to write ;)

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed