FireFox Padding/Margin Issues

[N1CK3RS0N]

Hello,

 

I'm working on a new design for my CMS and I'm trying to get this issue straightened out.

 

The problem is FireFox adds padding outside the box, instead of inside. So if you had a box with 200px width and added 10px padding, the box is now 220px, instead of 200px with its contents confined to 180px;

 

What I'm trying to do is running the body at 100% width. The main column is 65% width and the side column is 35% width. I want to add some padding between them so they do not run right against eachother, so I set the margins on the sides of the columns to 5px. But now it expands further than the 100%, so it wraps that 2nd column down to another row.

 

Any ideas?

[haku]

Yes. The best way to have cross-browser compatibility with margins and paddings is to use two divs instead of one. Set the width (or height) on the outer div, and the margins/paddings on the inner div. Your problem happens when you set a width and side paddings/margins on the same div, or a height and top/bottom margins/paddings on the same div. Doing what I suggested fixes the problem.

[N1CK3RS0N]

Yes. The best way to have cross-browser compatibility with margins and paddings is to use two divs instead of one. Set the width (or height) on the outer div, and the margins/paddings on the inner div. Your problem happens when you set a width and side paddings/margins on the same div, or a height and top/bottom margins/paddings on the same div. Doing what I suggested fixes the problem.

 

Indeed. Thats how I ended up solving it. Been a while since doing templates, mostly been doing PHP lately. Remember that trick while watching TV then ran to my computer to try it out hehe.

 

Thanks though