The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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

    This reply has been reported for inappropriate content.

    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