※ ChatGPTを利用し、要約された質問です（原文：CSS、ブラウザの幅が狭まったときの表示）
ブラウザの幅が狭まったときの表示について
このQ&Aのポイント
CSSを使用して、ブラウザの幅が狭まった場合の表示について教えてください。
ブラウザの表示幅が広いときは、Alpha Beta Gammaが同じ行に表示されますが、狭くなるとGammaが下の行に表示されてしまいます。
入りきらない部分が表示されないようにするにはどのようにすれば良いでしょうか？
CSS学習中です。
ブラウザの幅が狭まったときの表示について教えてください。
現在、CSSファイルで以下のように書いています。
【test.css】
#alpha, #beta, #gamma {
position: relative;
display: inline;
float: left;
}
#alpha {
width: 300px;
background: #f00;
}
#beta {
width: 100px;
background: #0f0;
}
#gamma {
width: 100px;
background: #00f;
}
このCSSを使い、
<body>
<div id="alpha"> Alpha </div>
<div id="beta"> Beta </div>
<div id="gamma"> Gamma </div>
</body>
と表示させています。
ブラウザの表示幅が広いときは同じ行に
Alpha Beta Gamma
と並ぶのですが、ブラウザの表示幅を狭めると、入りきらないGammaが下の行に表示されます。
そうではなく、入りきらない部分は表示されない（表示が欠ける）様にしたいのですが、どのようにすればよいのでしょうか？
ブラウザはIE6を使用しています。
お礼
質問前に確認したのですが、自分の知識不足で同じ問題であることに気付きませんでした。 cssファイルに #content{ width: 500px; } を追加し、htmlを <body> <div id="content"> <div id="alpha"> Alpha </div> <div id="beta"> Beta </div> <div id="gamma"> Gamma </div> </div> </body> とすることで解決しました。 固定幅の親要素を作ればよかったのですね。 有難うございました。