How do you equally space columns/table cells?

[richrock]

Although I've been doing html/css for years, I can't quite figure out how to do equal spacing 'properly'....  I typically fudge it by making the right side wider than the required border - it'll make sense below.

 

What I mean is :  Say you have a table 600px wide, and you need to create 3 equal columns.  There is a border round this table of, say, 12px, for the width available is 600-(12x2) = 576px.

 

Divide this by three, and you get equal column widths of 192px.

 

But... in the interests of good design (rather unlike our Olympic logo/mascot  ) : The second and third columns would need a padding on the left of 12px too..  Thus making :

 

Cell One 192px, no left padding |

Cell Two would have left padding 12px, | 

is now 180px wide (not 192)

Cell Three would have left padding 12px,

is now 180px wide (not 192)

 

As you can note, cells/columns 2 & 3 are now 180px, NOT 192px.  How would you work this out so that the three columns are equally spaced, and not padded on the left side, and the right side reaches the end of the 576px available?  It would be easy to add padding-right to the cells, but this makes it 12px short on the last cell, and IE6 doesn't support :last-child, only :first-child 

 

Any ideas?  Bear in mind that this will have to work with end-users NOT fluent in HTML/CSS but would have basic guidance on adding styles..

[ignace]

Why do you give only the second and third a padding-left?

[madmenyo]

seems more of a error in the design phase? I mean if you have a fixed total widt like 576px it's not really possible to add 3 columns with 192px width and padding . Otherwise, make cells 204px width with 12 px 1 side padding they become 192px... or i don't get what your asking .

[ignace]

It would seem more natural to give each column the same amount of spacing. So you won't end up with something like:

 

| text       |           text     |           text    |

 

Or did you never hear of text-align: right?

[richrock]

text-align: right would not work - it's not the position of the text, but it seems you cannot make 3 columns in either a div or table fit a container and be equally spaced.  I'll knock up an image to let you know what I mean, it's a bit difficult with text.

 

I don't do the designs, they're done by a design team, and they use a 4px grid.  This means all numbers have to be divisible by 4.  I just used 576 as an example, as it's the optimum width for content in html emails.

 

It doesn't matter on the width, but the princinple is the same.  In print you can get columns correctly spaced, yet on the web you can't?