[HTML][CSS]width:100% - 100pxみたいなことを実現する方法

お久しぶりです。
今回はCSSネタ。

CSSを書いていて、相対値と絶対値を併用したいというケースはよくあると思います。
例えば、

.hoge {
    width: 100% - 100px
}

みたいなケースです。（上記のコードは動きません）

もうちょっとすると、calcが実装されて簡単に上記のようなコードが書けるようになるかもしれませんが、 現時点では難しいです。

しかし、こういうケースは試用として存在しうるので、 私は以下のようにして対処しています。

html

css

.div1 {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-left: 50px;
    padding-right: 50px;
}

.div2 {
    position: relative;
    width: 100%;
}

こうすると、.dvi2の幅が　100% - 100px　になります。