Maybe someone could explain to me how this works, or how this is supposed to make sense:

I'm trying to use DIVs more, as I've seen this is a desireable thing to do. So, I'm doing some testing for one of my pages. Inside my main table layout table cell, I put a div. It's a div I want to span the width of the cell. So, in my CSS I put "width: 100%". This works. However, simply for design purposes, I have 10pixel borders on the left and right of this DIV. This makes the DIV 100% wide plus 20 pixels. So, just to test, I tried "width: 730px" (the width of the table cell). This works as I thought it would, as in the DIV, including borders, is 730px wide.

Is this an IE thing? Is this a CSS thing? What is this? I'd like to have this DIV be expandable, and I'd like to understand how it acts for my own knowledge, but this doesn't make sense to me.