help with logic

[cybershot]

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.

[TheDoc]

This lines up perfectly: http://jsfiddle.net/uCrhn/

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

[TheDoc]

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

[joshuanhibbert]

@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).

[Michael_bonds]

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.

-Mike

[Michael_bonds]

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.

-Mike

[joshuanhibbert]

@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)

Where:

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)

[Michael_bonds]

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

[joshuanhibbert]

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: http://jsfiddle.net/joshnh/Zz9D4/

[Michael_bonds]

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.

-Mike

[joshuanhibbert]

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

[joshuanhibbert]

@cybershot No worries! It doesn’t really affect the margin of the list items per se, more just creating an invisible gutter for the left hand margin of the list items to sit in. As the ul is a block level element, it naturally takes up all available width, and what we are doing is telling it to increase that by an additional 32 pixels (the negative margin sits outside of the parent). That way you could never tell that the list items on the far left all have a margin of 32px! If you give the ul a background colour, you can see what I’m talking about (well, once you clear the floats).

Finally, that formula I provided actually works correctly here, but you have to take into account the 1px border, and the 2px padding on each list item.

P.S. Setting display: none; on an element simply means that it doesn’t appear in the formatting structure of the page. It does not remove it from the DOM, and that is why nth-child still counts hidden elements.

[Michael_bonds]

I’m happy this was fixed!

[Author]

Posts