0
単一の列レイアウトを使用しようとしています。このページには、ヘッダー領域、コンテンツ領域、フッター領域の3つのセクションがあります。各セクションには、ユーザーの画面上の表示可能な領域の幅全体にまたがる異なる背景イメージがあります。私は次のコードに示すように、セクションをdivに分割して、内容が増えるにつれてコンテンツの領域が大きくなるようにしました。CSS/HTML - ブラウザのサイズ変更で1列のレイアウトでオーバーフローが発生する
私の問題は、ブラウザ（Chrome）でctrl +を押してテキストのサイズを大きくすると、カルーセル部分が背景領域をオーバーフローするということです。以下は、リサイズ前とリサイズ後のスクリーンショットです。
HTML/CSSコードのモックアップは簡単ですが、なぜオーバーフローが発生するのかわかりません。何か案は？私はCSS/XHTMLの新人です - 私が達成しようとしているものを達成するための他の標準的な方法はありますか？ここで
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header_container">
<div id="header">
Header text
</div>
</div>
<div id="content_container">
<div id="content">
The content
<div id="carousel">
The carousel
</div>
<div id="clear_div">
</div>
</div>
</div>
<div id="footer_container">
<div id="footer">
The footer
</div>
</div>
</body>
</html>
HTMLのためのCSSです：
#header_container {
width: 100%;
background-color: green;
}
#header {
width: 960px;
margin: auto;
}
#content_container {
width: 100%;
background-color: lightblue;
}
#content {
width: 960px;
margin: auto;
position: relative;
}
#carousel {
float: right;
width: 300px;
height: 200px;
background-color: red;
}
#clear_div {
clear: both;
}
#footer_container {
width: 100%;
background-color: lightgray;
clear: both;
}
#footer {
width: 960px;
margin: auto;
}
うん、それでした。ありがとうございました！ – ARV