Spacing Issue

[goalieman34]

Hello,
On my website I have 4 images that run horizontal along my page. The image called “Civil” has some spacing to the right that is too large and not consistent with the images. Any help on fixing this so that it is even with the rest of the images would be great.
Thanks,
http://petrowest.squarespace.com/

[Historical Forums User]

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;

[goalieman34]

ok so i switched it to px which made things a lot easier. Still have a bit of a gap that I would like fixed .

[Historical Forums User]

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]

@3n1gm4 Perfect! Thanks so much for showing me the steps.

[JohnMotylJr]

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

[Author]

Posts