I've noticed that different browsers work with borders and padding differently, but I can't figure out exactly how.

It seems that in IE if you create a div with a specified width and then add a border or padding, the width of the div will not change.

When working with Firefox though, any padding/borders seems to be added to the width specified.

Due to these difference I'm having trouble getting designs with borders and padding to work out properly. Can someone please explain how the browsers handle these, and how to make it work for both?

http://tantek.com/CSS/Examples/boxmodelhack.html

The link above explains the CSS box model (basically, IE is getting it wrong while Firefox is getting it right). There are various workarounds (one is presented on the page).

If you avoid specifying padding and borders at the same time as defining width you can avoid the box model problem some of the time.

Apply the padding and borders to inner elements(where possible) will avoid the problem altogether.

Or as Vinnie pointed out use one of the hacks such as the tantek hack above, or my favourite because its easier to remember and only affects ie is linked to below.

http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

Also read the FAQ sticky thread at the top of the css forum as the first faq explains the problem indetail

Paul