サイドバーを左に、スライダーを右に動かそうとしていますが、画像がドキュメント フローから外れています。
基本的に私がやろうとしているのは、ユーザーがブラウザ ウィンドウのサイズを変更すると、画像が縮小することです (これが、max-width: 100% を使用している理由です)。
Chrome で表示して問題を確認する
サイドバーを左に、スライダーを右に動かそうとしていますが、画像がドキュメント フローから外れています。
基本的に私がやろうとしているのは、ユーザーがブラウザ ウィンドウのサイズを変更すると、画像が縮小することです (これが、max-width: 100% を使用している理由です)。
Chrome で表示して問題を確認する
以下のようにメインクラスで使っwidth : 100%
てみることができます。
.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}
編集:
マークアップデザインを編集しました。記事のdivの外側に新しいコンテンツのdivを追加しました。
編集
#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}
#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}
.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}
この方法でクラスを変更すると、ブラウザのサイズが変更されると、画像のサイズが変更されます。
この問題についての簡単なデモを見ることができます。