固定幅＋可変幅レイアウトがなぜこれで実装可能？
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>
お礼
早速有難うございました ブログ名表記せず失礼しました。 width : 550px;ここの所の数値変更で解決しました。 また1つ勉強させていただきました。 カウンターもいろいろな所に貼り付けては見るのですが、うまくいかなかったものですから。 もう少し頑張ってみます。 どうもありがとうございました。