DIV padding

I have a pixel-perfect layout; it was previously achieved with IFRAMEs but I am now moving the contents of each IFRAME into the main document. Previously, the IFRAME body panel had a padding of 5px, which was the result I wanted.

Now I've got a DIV representing the IFRAME, yet I can't set a padding on it because it makes the DIV bigger by the padding specified (go figure). I try nesting a DIV inside the document DIV, and setting either a padding or a margin of 5px on that, and again, the outer DIV expands. How do I achieve a DIV with an inner padding of 5px, whilst keeping the width specified?

Sorry if my post is a little hard to understand, but I've spent a ridiculous amount of time on a seemingly small and simple task and it's taking a lot just to stop me from swearing every second word.

You have to reduce the width accordingly.

For Example; say that your width is 100 and your padding was 5px.


#someItem
{
width: 100px;
padding: 5px;
}


Basically, it's 100px width WITH 5px padding (on the left, right, top and bottom). So, if the left and right add up to 10px; then reduce the width by ten pixels.


#someItem
{
width: 90px;
padding: 5px;
}


That should be your solution.

Thanks; that seems to work, although it is not an ideal solution (I have a few Javascript functions that use the dimensions of this particular DIV).

It seems illogical that padding on a nested DIV would expand the outer DIV. To me, I would expect the outer width and height to remain as they were defined. Even when defining padding on the outer DIV, I would still expect the outer dimensions to stay the same and instead make the inner dimensions smaller.

EDIT: Added solution to my page, works perfectly. Thanks.