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.
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.
@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).
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.
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.
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.
@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)
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.
It's the sortable gallery. When you choose a category that an image isn't set to display in, the gallery hides the image. I didn't know until today that nth-child would still see that image
Your fix worked great. I never would have thought of that. Still trying to figure out how putting a negative margin on the ul affects the margin on the list item. Thanks for that code, I am going to have to remember that. That's a neat trick
@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.
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.
Use first-child instead of last-child for better browser support (IE).
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).
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
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.
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
display: inline-block;and the white space rendering is giving you grief.The actual equation I use (as touched on above) is:
Where:
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
TheDoc suggested using first-child. I plan on changing it, just haven't yet.
nth-childworks. Unfortunatelyfirst-childwon't work in this case.The simplest solution, in my opinion, would be to remove the
nth-childselector completely. Give theula 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/
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
It's the sortable gallery. When you choose a category that an image isn't set to display in, the gallery hides the image. I didn't know until today that nth-child would still see that image
@Joshuanhibbert
Your fix worked great. I never would have thought of that. Still trying to figure out how putting a negative margin on the ul affects the margin on the list item. Thanks for that code, I am going to have to remember that. That's a neat trick
ulis 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 theula 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 whynth-childstill counts hidden elements.