Fluid Width Three Equal Columns

[hybrid kill3r]

I have three columns in my layout. I want them to each be exactly the same with, but fluid. For example: I tried setting the column width to 33% since 100%/3 = 33.333%, but that was too wide, I guess because of the borders? What's the best way to set the width of a column to fit a third of the parent width?

[cousineaug]

I have three columns in my layout. I want them to each be exactly the same with, but fluid. For example: I tried setting the column width to 33% since 100%/3 = 33.333%, but that was too wide, I guess because of the borders? What's the best way to set the width of a column to fit a third of the parent width?

yes borders and padding tend to get in the way. There are various articles on global clearing of margins. However, what seems to work for most applications is a general clear in your style sheet:

* {margin:0;padding:0}

This declaration helps to reset everything. You may have noticed that IE, FF, Chrome, etc. use different settings for borders and padding. The drawback to this approach is that you may need to redefine margins for other elements as you use them.One thing I have done is enclose each COLUMN in a div that re-establishes the margins:

* {margin:0;padding:0}.margin {margin: 1em;}   /*put 1 em margin all around*/

then the HTML looks like

<div id="leftcol"><div class="margin"><!-- content goes here --></div><!--end margin section--></div><!--end left column><div id="middlecol"><div class="margin"><!-- content goes here --></div><!--end margin section--></div><!--end middle column><div id="rightcol"><div class="margin"><!-- content goes here --></div><!--end margin section--></div><!--end right column>

try this and define your columns at 33%....note that this may end up with a 1 to 2 px leftover because of rounding errors. As long as those leftover pixels are not in the middle of the screen you should be ok.you will run into other little complications and we are here to help...........Guy