Problem with using percentages in width Options

[denmarks]

I have a series of web pages using a standard format. I generate a standard header for each. There is then a "maindiv" in each. The "maindiv" is defined with a width of 96% with a 2% left and right margin. My current problem is with this page: http://hawaii.dmmarks.com

Within the "maindiv" I have a "left" and "right" division. They are 60% and 40% of the remaining width. If you look at the page you will see that I have the width for each column as 62% and 42% which are wider than what they should be and it still doesn't fill the column. Also the framed elements and the table elements do not line up on the right edge of the left column. They do in the right column. As I reduce the width of the window manually they do get closer to alignment. But some of the text that is outside of a box or table starts to run over due to the 62% width.

I am sure it must be something minor but I can not figure out these 2 glitches. It is as though there is an automatic padding outside the framed elements and the table and they are different.

Note that all the framed elements use the same class. All of the tables also use the same class except for one that also includes a class for sort purposes.

[pandy]

#left and #right are wider than you think. Together they are wider than #maindiv, as you've specified.

Add this at the bottom of the style sheet and I think you'll get the point.

CODE

#maindiv   { border-top: 20px solid red }
#left      { background: lime }
#right     { background: orange }

[denmarks]

I made further changes which seems to fix one of the problems. Now how do I get the tables to be 100% width?

I made the div for the tables 103% width to make it come out pretty close. I do not know why it works.

This post has been edited by denmarks: Feb 27 2012, 04:45 PM

[denmarks]

All problems have been solved and site updated. Thanks for the help.

This post has been edited by denmarks: Feb 28 2012, 12:47 PM