[解決済み] Divの幅100%から固定ピクセル分を引いた値

質問

テーブルやJavaScriptを使わずに、以下のような構造を実現するにはどうしたらよいでしょうか。白い枠はdivの縁を表しており、質問とは関係ありません。

真ん中の領域の大きさは様々ですが、正確なピクセル値を持ち、構造全体はその値に従って拡大縮小されるはずです。単純化すると、上中下の div に "100% - n px" の幅を設定する方法が必要になりますね。

クロスブラウザ対応のきれいなソリューションがあればありがたいのですが、不可能な場合はCSSハックで対応します。

ここでオマケ。もうひとつ、私が悩んで結局テーブルやJavaScriptを使っている構造です。少し違いますが、新たな問題が発生します。主にjQueryベースのウィンドウシステムで使っているのですが、レイアウトはスクリプトの外に置いて、1つの要素（真ん中の要素）の大きさだけをコントロールしたいのです。

解決方法は？

ネストされた要素とパディングを使って、ツールバーに左右の端を持たせることができます。デフォルトの幅は div 要素は auto これは、利用可能な幅を使用することを意味します。この要素にパディングを追加しても、利用可能な幅の範囲内に収まります。

左右の角丸画像と、その間に繰り返される中央の画像を配置する場合の例です。

HTMLの方です。

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSSのことです。

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}