カラムの流体を最小幅にしてから、浮動小数点のサイドバーを押し下げます

Question

流体幅が最小幅のものと右側が浮動するものの2つのdivがあるとします。たとえば、これはlive demo (with code) at jsbin.comがこれを持っている：あなたは、ブラウザのサイズを変更し、それを狭くする場合、それは最小幅に達するまで

<div id="container"> 
    <div id="header">header</div> 
    <div id="fixedFloatingColumn">fixed-size column<br />o<br />o<br />o<br />o</div> 
    <div id="fluidNonfloatingColumnContainer"> 
    <div class="column">stretchable column 1</div> 
    <div class="column">stretchable column 2</div> 
    <div class="column">stretchable column 3</div> 
    </div> 
    <div id="footer">footer</div> 
</div> 

、流体のdivが、それに応じて調整されます。その後、さらにウィンドウを絞り込むと、水平スクロールバーが表示され、右側の浮動小数点のdivがウィンドウの右側に隠れてオーバーフローします。

私が望むのは、ユーザーがウィンドウを狭め続けている場合、非フローティングdivが最小幅に達すると、ブラウザーはオーバーフローするのではなく、フローティングサイドバーdivを非フローティングコンテンツの下にプッシュする必要があります。 （隠れている）。それは可能ですか？

Answer 1

私は、あなたがメディアクエリを使用して喜んでいると思います。 「レスポンシブルウェブデザイン」を行う方法に関する短い入門書については、Ethan Marcotteがこのarticleを見ることから始めます。サイモン・コリソンのウェブサイトは、私があなたが達成しようとしていると思うものの素晴らしいexampleです。