How margins work

[pardicity3]

Before I forget, here is the link to the page I am discussing [excuse the use of geocities please...I forgot to pay for my domain this year] http://www.geocities.com/mikesadventuresnet/css/index.html . Right now this page just contains useless text to take up space, so the only concern right now is the layout! :p

Okay so onto the question. I have been using right and left margins set at 1% to space out my "three column" layout. This works perfectly in IE 6.0 (go figure!) but in all my other test browsers (Opera 6, NN 6.2, Moz 1.2a) the farthest column right is closer than it should be to the middle column. I have used a 1% margin to the middle box's right and a 1% margin to the left box's left side. This should creat a 2% space in between, but it only seems to be doing a 1% space outside of IE 6.

Also, one last question...in moz 1.2a I see a light blue line running down the right side of my navigation menu, any body else see this?

[ronaldb66]

I really wouldn't know, but i do recall something with IE not implementing the box model correctly, which would support your design working as intended in IE and not in other browsers.
I'd suggest adding up all the dimensions horizontally to see what you end up with, but i keep forgetting if the width of a box element includes margin widths according to the box model, or not.

[pardicity3]

Yeah, I thought about the whole box model thing too, but the only problem with that assumption is that this method of using 1% margins on each side of my three columns works in other areas. The farthest box left (the first one) uses this method, and the spacing is the same in IE and Moz. I will just have to look into this some more.

[pardicity3]

Hmm, I just found this on http://www.w3.org/TR/REC-CSS1#margin-top :

Percentage values: refer to width of the closest block-level ancestor

So now, this is slightly confusing to me. If I have a div that is contained only by the body and not by any other element, will its percentage-based margins by derived from the body? If so then I still don't see where my problem lies, but if not, maybe that is where my problems come from.

[Catman]

What happens if you set the body border to none ( body { border : none; }?

[pardicity3]

Nothing happens, everything just stays the same...I am getting to the point where I can just accept it not working EXACTLY the way I want it to. It just bugs me when I can't do things :p .

I am still looking into the whole box model thing though!