Adjustable width in CSS?

[aqutalion]

Is there a way to have a child div's width be a set number of pixels less than its parents? For example, if you want it to be 10 pixels narrower than the parent, set the width to something like 100% - 10px?
What I'm trying to do is have a title bar with a margin of 10 pixels on each side for bookend-like images. The center of the title is supposed to stretch with the width of the box. What I had been doing was set the title section's width to 100%, with margin of 10 pixels on either side, then have the bookends absolutely positioned on either side. This looks fine in IE, but in Firefox, the width value apparently doesn't include the margins. The title section shows up as the same width as the parent box, overlapping the right border by 20 pixels. Since the width of the boxes are all fixed, I can sort of get around it by fixing the widths of each indiviual title, but I'd rather have something more general.

[Marshall]

You could eliminate the width: 100% from the element and just set the margins. By default, an element with stretch as wide as it can. You other choice is set the element's width in percentages, say 90%, with the left and right margins set at auto. This will float it center. If your parent is set to percentages, it is not wise to mix measurements.

Marshall

[swa66]

This looks fine in IE, but in Firefox, the width value apparently doesn't include the margins.

Width of an element is supposed to be the content, not including padding or margins.

It's one of many annoying bugs in IE to do this wrong and set people on the wrong foot. Hence our recommendation to never develop CSS in IE.

Set the width on the outer element and use padding & margins on the contents. If you need to, fix it later on for specific IE versions with a conditional comment. [Take care to avoid givign these "fixes" not to IE8, it should _finally_ have a fixed box model]

Typically the image at [w3.org...] is enlightening.