html/css：3カラム液体/流体浮動;浮動列の横の浮動列、浮動小数点のときに次の「行」に降下する？

Question

これは私の最初のQはstackoverflow上で、そして最後にアカウントを作成すると、私はかなりの "類似の"質問タイトルを自分自身に見ています...しかし、私は答えを見つけるためにほとんどGoogleを悪用している、そして無駄に。そう、ここに行く。

私はむしろhtmlとcssの新人ですが、積極的かつ強迫的で、できるだけ多くの知識を急速に獲得しています。ブレークネックのペースで、最後に< 2ヶ月間です。大きな進歩。

しかし、私は自分のレイアウトとやりたいことが分かったのですが、私は達成できないようです。

誰もが、私は推測しているだろう、 "液体"レイアウトと明らかに信じられないほど人気のある "聖杯" 3列のレイアウトを知っている。

このタイプのレイアウトを使用したいと思うのは、私の意見では最も美しいものですが...私は自分自身を意味論的に書くので誰もコピーしていないので、だから私は自分のフレームワークと個人的なつながりがあり、マークアップを見ると誰かが何を考えているのか把握する必要はありません。

私は2「サイドバー」列で包まれ、途中で私のメインのコンテンツをしたい、と私はフル解像度から全部「液体を、」したいすべての方法、：ここで

が目標です320px幅まで

しかし、SEOの目的のために、私はDOMツリーに私の「メインの内容」欄（中央1）第一にしたい、と私は私のサイドバーをしたい：

第一

）ページの幅を流動的に縮小し、次に 2番目）が狭くなると、メインコンテンツ（中央）の列が左側に「スナップ」し、上部に残り、100％の幅になります。 3番目）サイドバーが "スナップ"メインコンテンツ列の「下」には、それぞれ幅の50％を占める

が含まれています。したがって、3つの列はすべてページの全幅を占めており、サイドバーは「スナップアンダー」です。 「中央」列と同じ幅。

このような何か：

|2222111111113333| 
|________________| 

|222111111333| <-- 
|____________| 

|22111133| <-- 
|________| 

*snap*(a) 

|1111| <-- 
|2233| 
|____| 

|11| <-- 
|11| 
|22| 
|33| 

か：は（b）は

|111111| <-- 
|222333| 
|______| 

|111| <-- 
|111| 
|222| 
|333| 

|11| <-- 
|11| 
|11| 
|22| 
|2_| 
|33| 
|3_| 

は私が取得しています何を参照してください。スナップ？ここで

は問題です：

私が...しようとする、私は考えるかについて検索することができますすべてのものを試してみました、「DOMを作るために、CSSのためだけに「まさか」は存在しないようです。中段と上段の両方に配置し、サイドバーを左右対称に保ちつつ、スペースを節約し、すべての3つの列を常に素敵できちんとした箱に保管してください。

私は中央の列を上にしてDOMに1位にすることができましたが、そのためにサイド・カラムに混乱と混乱がもたらされます。＃2は＃1のdiv内になければなりません/ midは一番上にとどまるが、＃3をそのdivに入れることはすべてをねじ込む。

これはです。少し問題は、私にとっては驚くほどイライラしていませんでした。私は今数週間それを取り組んでいます。 （私は、ほぼ2ヶ月前にHTMLとCSSを学び始め、半分の私の時間はこの問題を苦闘費やしてきた）

を、誰もが私が話しとやろうとしている正確に何を知っている、と知っている場合：

A）これは私が本当にこの一つの小さな（読み越えて移動したいと思いますので、私は絶対に...知っているのが大好きだか

にこれを行うには

B）でも可能であるかどうか：HUGE）を発行し、世界の支配に向かって私の道を歩み続ける。

TL;

"なる：

|1| 
|2| 
|3| 

はこの中に回転せず：maxと最小スクリーンとの間の任意の時点で

|_1_| 
|2_3| 
|___| 

：

|_1_| 
|2__| 
|__3| 

または本。

可能ですか？または私はただ（放棄して）私のレイアウト戦略を調整し、移動する必要がありますか？

Answer 1

私は、これはあなたが探しているものの一種であると思う：

http://jsfiddle.net/grc4/kcX5n/

それは、ウィンドウのサイズが変更されたときにページのレイアウトを変更するjQueryのを使用しています。もう1つのアプローチは、css3メディアクエリを使用することですが、私はあなたが要素の順序をどのように（213から123に）変更するかはわかりません。

Answer 2

古い質問が、私はそれが非常に簡単だと思うCSS：

#col1{float:right} 
#col2{float:left} 
#col3{float:right}