Treehouse: Grow your CSS skills. Land your dream job.

help with logic

  • # June 14, 2012 at 7:59 pm

    I have a page that is 613px wide

    I put three images horizontal across the page. Each image is 177px wide. That means that all three images added together comes out to 531px

    each image has a 1px padding around it. so, add left and right padding together and the 531 turns into 537px

    subtract 537 from 613 and you get 76px.

    That means that I have to space the images x amount of pixels in order to figure out what the equal space is. So there will be the same amount of space on the left side of the page as there is on the right side of the page. What is the best way to figure out how much margin to apply to the right side of the images? Keep in mind that I am using css3 to remove the margin-right: from the last image.

    I came up with 32px by changing it 1px at a time until all three images lined up correctly. If I put to much, then the third image would break layout and move down under the first two.

    # June 14, 2012 at 8:40 pm

    This lines up perfectly:

    Use first-child instead of last-child for better browser support (IE).

    # June 14, 2012 at 8:46 pm

    yes, it does line up good. the question is – How do you determine what left-margin to put on the images? I figured it out by nudging the images 1px at a time until the layout didn’t break. I would have thought you could figure it out by doing the math I posted above. Taking the 76px that are left and dividing or do something with it to find the right answer. That is what I am really after. The best way to figure it out. Changing 1px at a time can’t be the solution.

    # June 14, 2012 at 9:08 pm

    You could try to do some math, but nudging it is pretty easy.

    # June 14, 2012 at 9:12 pm

    @cybershot Unless I’m confused, isn’t it just a simple maths problem? You already worked out that you had 76px left over, divide that by 2 (the number of images minus 1, or the number of spaces between the images), and you get 38px, which is what @TheDoc used.

    That’s always how I have done it, and I’ve never had an issue (unless working with percentages, they can be a pain as browsers often round differently).

    # June 14, 2012 at 9:22 pm

    Thats actually a rather tricky question. I found that when you work with weird widths and heights, most often you will find that something might not line up properly.

    One approach that I take is to get the total width of the container minus total width of my images divided by the number of images minus 1. This will give you the space between each image. That math might look something like this:

    (900 – 600) / (3 – 1) = 150

    Now, that could be the margin right of the first two images which would evenly space out your images.

    I hope that has helped. I also hope it is what you were asking.


    # June 14, 2012 at 9:34 pm


    I thought the same as you. Simple math. But when I do that math, I get a different number than what actually works. That is why I was looking for the actual equation. I posted the question on a math forum also.

    # June 14, 2012 at 9:44 pm

    are your images being floated, or are they displayed inline?

    If they are displayed inline, you may notice that you have space between each image that is applied by using display: inline;

    floating would eliminate this problem. Unless of course there is actually some padding or margin being generated by another css rule that you did not notice.


    # June 14, 2012 at 9:55 pm

    I got display block, float left

    # June 14, 2012 at 9:57 pm

    @cybershot I would be interested to see why it wasn’t working for you. I have never had a problem, and it also works correctly in @TheDoc‘s example. The only thing I can think of is that you are using display: inline-block; and the white space rendering is giving you grief.

    The actual equation I use (as touched on above) is:

    m = (c − (n × w)) ÷ (n − 1)


    m = margin (what we are working out)
    c = container width
    n = number of images in each row
    w = total width of each image (including padding and borders)
    # June 14, 2012 at 9:58 pm

    Would you be able to put this up on some where like jsfiddle?

    # June 14, 2012 at 10:24 pm

    This is a template that I am working on. If you check the games category, you can see how it is messed up by my current styles

    /* the styles for the images in the gallery */
    #main-content #gallery-page #gallery-wrapper ul#gallery li {
    display: block;
    float: left;
    width: 177px;
    height: 126px;
    padding: 2px;
    border: 1px solid #9e9e9e;
    margin: 0 32px 32px 0;

    /* removing the margin on the third image */
    #main-content #gallery-page #gallery-wrapper ul#gallery li:nth-child(3n+3) {
    margin-right: 0;

    TheDoc suggested using first-child. I plan on changing it, just haven’t yet.

    # June 14, 2012 at 10:39 pm

    Ah, right. That’s to do with the filter system and how nth-child works. Unfortunately first-child won’t work in this case.

    The simplest solution, in my opinion, would be to remove the nth-child selector completely. Give the ul a negative left margin equal to the margin given to the list items (32px in this case), and then set the margin on the left of the list items instead of the right.

    Here is an example of what I’m talking about:

    # June 14, 2012 at 10:45 pm

    it looks like there are some list items that are actually set to display none, so the wrong list item is getting the your nth-child rule.

    You may want to find out why this is happening, and then your problem should be fixed.

    PS: I looked at your source code with chrome developer tools to see what was there.


    # June 14, 2012 at 10:48 pm

    @Michael_bonds I believe that is to do with the filtering system, and is unavoidable.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.