Ok, but how do you know:
1.) How many percent is equal to 1em?
2.) That those widths and dimensions would fit perfectly with the same gap at both the left and right hand side?
Sorry, I’m just trying to get this straight in my head. 
and you could improve that:
[FONT=“Courier New”]html code:
<div>Peter f</div>
<div>Tom f</div>
<div class=“last”>Claire f</div>
<div>Mark f</div>
<div>Richard f</div>[/FONT]
[FONT=“Lucida Sans Unicode”]css code
#cmembers {
text-align: center;
}
#cmembers div
{
border: 1px solid black;
width: 29%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-right:1%;
margin-bottom: 1em;
padding: .8em;
background: #C6D7E9;
background: rgba(255, 255, 255, 0.5);
display: inline-block;
}
.last
{
margin-right:0;
}[/FONT]
[FONT=“Trebuchet MS”]php code
$i = 0;
while ($getMembers = mysql_fetch_array($result)) {
$i++;
if ($i % 3 == 0) {
$class = ‘last’;
} else {
$class = ‘’;
}
$fname = $getMembers[‘fname’];
$sname = $getMembers[‘sname’];
$name = $fname.’ ‘.$sname;
echo ‘<div class="’.$class.’">‘.$name.’<br /><br /><br /><br /><br /><br /></div>';
}[/FONT]
i’m ashamed i didn’t do it like this from the start 
it seems it’s time for me to get some sleep!
ARGH! Damn, why does that get me every single time!
Cheers.
easy: 30% * 3 plus 2% * 2 plus 0.8em * 6 was not cutting it 
Nope, can’t get that to work in IE6 or 7.
One thing I want to know, is how did you know that 29% * 3 plus 2% * 2 plus 0.8em * 6 is equal to 100%?
#cmembers div
{
border: 1px solid black;
width: 29%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-bottom: 1%;
padding: .8em;
background: #C6D7E9;
background: rgba(255, 255, 255, 0.5);
display: inline-block;
margin-right: 2%;
zoom: 1;
*display: inline;
}
Right, I have just let the divs stack (on my local copy so it’s not online yet so the link above will be the same as before) and removed all floats and clears and, yes they appear inline but the ones on the right are touching the ones on the left. If I add a margin-right to them, then the ones on the left will also get that margin which would not be needed.
How can this be solved?
oh jees, yes, Just added 2% instead of 1% and it lines up perfectly. Now, how do I fix it in IE6 and IE7?
Right, I will go and have a play about with your solution Paul, Thanks for that.
One thing I want to ask is:
What are the “*” and “+” doing at the strat of the CSS statements on these lines?
- html #cmembers div{display:inline}
*+html #cmembers div{display:inline}
Isn’t that what the 2% right margin was for or am I missing something ?
#cmembers div
{
border: 1px solid black;
width: 29%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-bottom: 1%;
padding: .8em;
background: #C6D7E9;
background: rgba(255, 255, 255, 0.5);
display: inline-block;
[B]margin-right: 2%;[/B]
}
Or did you mean something else?
You are making things quite hard for yourself as you have sized the main container in pixels but then you have divided it using percent. There’s nothing wrong with that (apart for the 1px rounding error on percentages in some browsers) but unless uou are going to change the size of the container at some stage then you may as well just use pixels for the inner elements and you will know exactly how wide to make things so that they fit.
To work out the size in percent and ems you need to do the following.
main container = 960px width
main content has 1 em padding - 1 em is equal to the font-size for that element so if the element is font-size 16px then 1em = 16px.
So that gives us 960 - 32px = 928px available space for your three boxes.
Your boxes are 29% wide which = 269.12px which will probably round down to 269px (but could be rounded up by some browsers)
The boxes also have padding and borders so you need to add 2px for the borders and then you have .8em padding. As mentioned before the .8em will be .8 of the parent font-size so .8 of 16px = 12.8px padding (call it 13px)
So now we have a box size of 269 + 2 + 26px = 297px
Therefore 3 across would be 297 x 3 = 891px
928 -892 = 37px of available space left. So to space them out we need half of that = 18.5 (call it 18)
So the margin-right needs to be 18px
Instead I would have used pixels for the elements to make life easier. and do this.
#cmembers {
[B]font-size:0;/* kill white space bug in inline-block elements*/[/B]
}
#cmembers div {
[B] border: 1px solid black;[/B]
[B] width: 267px;[/B]
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-bottom: 2%;
[B] padding: 12px;[/B]
background: #C6D7E9;
background: rgba(255, 255, 255, 0.5);
display: inline-block;
[B] margin-right: 24px;[/B]
[B] font-size:16px;[/B]
}
* html #cmembers div /*Targets IE6*/ {
display: inline;
}
* + html #cmembers div /*Targets IE7*/ {
display: inline;
}
#cmembers div.last {
margin-right: 0;
color: blue;
}
I reduced the sizes a little from the original calculations but the maths are as follows.
(267 + 2 + 24) x 3 = 879
928 - 879 = 49
49 / 2 = 24.5
So elements are 267px wide with 12px padding and 1px borders and a right margin of 24px and fit in all browsers.
Right, I have an issue:
Here is my code:
#cmembers div
{
border: 1px solid black;
width: 29%;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-bottom: 1%;
padding: .8em;
background: #C6D7E9;
background: rgba(255, 255, 255, 0.5);
display: inline-block;
margin-right: 1%;
}
.last
{
margin-right: 0%;
}
It seems to me that the .last, margin-right: 0%; is not being acted upon as when I put that in and test it, the page looks no different than when it is removed.
It’s not online yet, still running locally at the moment.
Another thing: If I put text-align: center; on #container, it centres everything, even on other pages which is NOT what I am aiming for. I added text-align: center; to 'cmembers and, that made the box that was on the bottom row on it’s own move to the middle instead of stay on the left under the first column of boxes as it should be.
Any ideas?
very clever trick
but this will work only if some styling like backgrounds, borders are not applied to the parent or its children in a way it’ll show an ugly odd positioning contras something like the children stepping out from the left side of their parent.
ps: i’ve edited my post “a little” after Paul O’B replied, to make it more clear about what i mean.
Yes it’s only useful in certain situations and if you have to add extra elements to use it then it’s not always the best method. It’s just useful for those occasions when you don’t have to change mark up to use it.
We could use css3 to style every second element to have no margin also.
#cmembers div:nth-of-type(even){margin-right:0}
However it’s not much use until support is better for it and of course would have to be changed if three columns were needed
#cmembers div {}
[B]#cmembers div.last[/B]{ .....these rules will win out now }
You need to apply the rule with equal weight (if later in the source) or greater weight if earlier in the source.
Regading the centering then I’m not sure what you are trying to center as you have two columns already equally spaced. If you want the text in the divs centred then apply text-align:center to the div.
yeah, put the page online
= is for assigning? if ($i % 3 = 0)
== is what you look for? if ($i % 3 == 0)
only one thing i would add: using percentages doesn’t mean restriction in using only integer values. 28.3% is good also.
actually two: 2px + 1em + 29% + 2% is the reason i put that much emphasis on the understanding of the box model and how it can help us (all good browsers have developer tools showing you exactly what the calculated box model is and how the rounded one looks like ).
about the rest: all the way with you… when possible
Yes of course
The main point I was making that when dealing with percentages you just need to add a little more leeway than you should due to rounding errors but at the same time you should know what 2px + 1em + 29% + 2% is going to equal because you can’t guess that it will fit.
Of course if you use an extra wrapper that has no borders or padding then maths are easy and you can add padding and borders to the inner elements instead but I always avoid extra mark up because that is a hack and hacks should remain in the css file where they belong
no, not_last will suffice.
see the code i posted above you may be needing a smaller width, like width: 29% instead of 45%. but it works, i’ve tested it with firebug.