One solution would be to use px width instead of % (since its based on the 960) and then add (using example numbers) padding to:

column1: 0 5px 0 0;
column2: 0 5px 0 5px;
column3: 0 5px 0 5px;
column4: 0 0 0 5px;

your content area is 930px wide with four columns. Each image is 207px wide.
207*4 = 828px
930 - 828 = 102px (total combined gap between colums)

Since we are only concerning ourselves the 3 gaps on the interior of the page we now do:
102 / 3 = 34px (gap between each column)

now just divide that by two and you get the amount of margin each column should have.
34 / 2 = 17px.

Now because we don't want any extra padding on the left of column1 we want to only add padding to the right. (CSS Shortcut, combining all sides in one statement: margin: top right bottom left)

so your css will be

#column1, #column2, #column3, #column4 {
	 width: 207px;
	 float: left;
}
#column1 { margin: 0 0 0 17px; }
#column2, #column3 { margin: 0 17px 0 17px; }
#column4 { margin: 0 17px 0 0; }

@goalieman34 You could always go with ul / li...

Worked it in pretty well here, not sure if the anchor tags are really the right thing to do but hope this helps.

http://jsfiddle.net/vyjYx/2/