It is due to the fact that padding, borders and margins all add to the overall width of the div they are applied to (if you remove all these elements from your content div you will see what I mean). One solution is to add this to the top of your stylesheet (I am not saying this is the correct thing to do)
Have you actually tried what I suggested as the issue of padding, margins and borders being added to a div width only happens in Firefox and Chrome?
Also, you haven't got any padding, margins or borders combined with width of 100% on your header, navigation or footer as you say you have, what you have is outer containers (i.e. #navigationwrap) with a width of 100% and the margin, padding and border applied to the inner container (i.e. #navigation), this is not the same as having one div (as in your #content) that has all of these elements and therefore adds all the 'widths' together to form an overall width.
Thanks a lot. It sounds really good. I have note your code and take into the account. But it changes the format of the page. I got content part is not set as earlier. Is it possible to design the page like "CONTENT OF PAGE" automatically sets height according to to table height or other elements of the data.
The CSS I gave you for box-sizing is supposed to be at the top of your CSS on its own, not in one of your other divs (which is why it has the star, not a div name as it is to apply to everything in the website) so take it out of #content.
font-family: Verdana, Arial, Helvetica, sans-serif;
/* The rest of your CSS here