I've noticed that when you set the width of a div to 100%, often Firefox will show a horizontal scroll bar, as if the div is wider than the page. This isn't the first time I've had to deal with this issue, so I'm wondering if anyone has a quick fix?
That is not true, I have sites where the containing body div is 100% and I don't get a horiz. scroll bar. Paste the rest of your code, must be something else.
I guess whatever is set at 100% you have added either a padding, margin or border to it.. thus meaning 100%+padding/margin/border.
I agree, so far as I can without seeing code. Zoltan got it, I think with sarcasm? Cause I've been bitten by this myself. Someone had to point out to me that I started with 100% width and then tried to make it wider by adding padding to the sides. I thought padding just moved content away from the edge. Well, it does, and it's inside the "edge" of the div, but it's added on TOP of the div's original (content) width. Except in IE5.5 and below.
Something ive learned today when someone was helping me sort a few things, i made this same mistake, ive still so much to learn though.
Guys, I designed so far many websites all with external css. I faced with tons of problem. Of course I might be wrong, but behind my statement there was pure experience. The math is as simple as wd_2k6 posted..
^ pretty much. Although normally, with something that isn't 100% wide, then for "width" we're only counting content, padding and border, as technically the margins are on the outside... but, yeah.
In my opinion: Total Width = 100% + padding + margin + border, This rule is works on all browser. If want to add padding/margin/border in the box, try to add an extra div inside it and apply the padding/margin/border in that extra div.