固定幅＋可変幅レイアウトがなぜこれで実装可能？
cssで、固定幅＋可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、
なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、
望みどおりに実現できてしまっているのでしょうか？
結果オーライではありますが、理屈が知りたい＆後学のために、
理由をお教えいただければ幸いです。
(下記では見やすいようにタブを全角空白４文字に変換しています。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>2カラムレイアウト(左固定幅、右リキッド)</title>
<meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)">
<meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 150px;
background-color: #808080;
}
#container {
width: 100%;
}
#left {
width: 200px;
background-color:#A9A9A9;
float: left;
}
#right {
width: 100%;
background-color:#DCDCDC;
}
#footer {
clear: both;
width: 100%;
height: 150px;
background-color: #808080;
}
</style>
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
<div id="container">
<div id="left">
<p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div id="right">
<p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
</div>
</div>
<div id="footer">
<p>フッター</p>
</div>
<p><a href="#" onClick="history.back(); return false;">戻る</a></p>
</body>
</html>
補足
確かに、実用性に欠ける質問内容だったかもしれません。 失礼いたしました。 元々は、中央のボックスをメインコンテンツとし、左右のボックスにそれぞれ別の背景画像を挿入したかったんですが、 横幅のある画像を背景にしたかったので、幅可変にこだわってしまっていました。 単純に幅固定で実現できる形を取りたいと思います。 ありがとうございました。