CSSで固定長のブロックの横に可変長のブロックを置く方法

ちょうどこのダイアリの、サイドバーと記事みたいな配置がしたい。サイドバーの幅は固定長で、記事の幅は可変長に。実際にこのダイアリを表示したままブラウザのウィンドウ幅を変えてみると良い。ブラウザのウィンドウ幅を変えてもサイドバーの幅は変わらず、記事の幅が自動で変わるはず。
この配置にしたい。

HTML:

<div id="container">
    <div id="content">
        本日は晴天なり
    </div>
    <div id="side">
        サイドバーの文字
    </div>
</div

CSS:

#container
{
    magin: 10px;
}

#content
{
    margin-right: 150px;
}

#side
{
    position: absolute;
    right: 0px;
    width: 150px;

}

こうするとうまくいった。
以前はブロックを左右に配置するときには float を使っていた。これだと各ブロックの幅を可変長にしないとうまくいかなかった。

/* サイドバーまで可変長になってしまう */
#container
{
    magin: 10px;
}

#content
{
    width: 70%;
    float: left;
}

#side
{
    width: 30%
    float: right
}

float の性質なのか、サイドバーに固定長を与えるなどするとウィンドウ幅を狭めたときに記事がサイドバーの下に表示されたりした。