上記のリンクを確認すると、.content が水平方向に中央に配置され、.side 要素が .content の左側に固定されていることがわかります。ただし、ウィンドウ/ビューポートのサイズを 1024 以下に変更すると、.content (900px 幅) が本体の 1024px 幅制限の中央に配置され、.side が切り取られていることに気付くでしょう。私が設計したいのは、ウィンドウの幅が<= 1024pxの場合、.side要素の.contentの左側にスペースが残っている中央の.contentです。
私はしばらくこれで遊んでいますが、運がありません。ここにいる誰かが私よりも創造的であることを願っています。
この jsbin のソースは、http://jsbin.com/uloyep/2/edit で編集できます。
私が望むものを達成する唯一の方法は、少しJSを使用することです。
ウィンドウ/ビューポートが<= 1148pxの場合、body要素に.too-smallクラスを指定しただけです。body に .too-small クラスがある場合、.wrap 要素に 124px の左余白を与えました。これは完全に機能します。
ボディの最小幅である 1024 ではなく、なぜ 1148 なのですか? 900 + 124 * 2 = 1148 なので。しかし、なぜ 124 * 2 なのですか? 124 は、幅 900 ピクセルの .wrap 要素が中央に配置され、ビューポートが幅 1148 ピクセルの場合の両側のスペースの量です。ビューポートの幅が 1148 未満になると、.wrap 要素の両側のスペースが 124 ピクセル未満になり、.side 要素が切り取られたり切り取られたりします。したがって、この時点で、.wrap 要素に 124px の左余白を与えます。トリミングされるのは右余白だけではありません。それが理にかなっていることを願っています。少し遊んで、どのように機能するかを確認してください。
純粋な CSS ソリューションがあれば、私はまだ興味があります。しかし、それまでは、これが私が思いつくことができる最高のものです。
どうですか？ラッパーをコンテンツのみに合わせてから、コンテンツを中央揃えにします。
ここで私のリビジョンをチェックしてください: http://jsbin.com/uloyep/8/ これはあなたの望む効果ですか?
.side および .content div に "float:left" を設定し、それらに対応するようにラッパーの幅を広げました。また、フローティングが機能したため、.side div から "position:fixed" とマージンを削除しました。