CSS3のレイアウト - 聖杯のレイアウト

杯レイアウト彼はフライング翼部は、中間溶液適応3列レイアウトの両側に固定されています。

レイアウトのための聖杯中間のdivコンテンツが何かをカバーしていないされた後、中間のdivパディングが左右2つのdivの相対的な配置位置を左右に提供されています。相対的な左右の特性divの両側に追加し、左と右のように2列のdivのコンテンツの後にモバイル真ん中div要素をカバーしていません。

レイアウト杯（適応中間固定端）を備えてい、その内容は、その内容を変更するには、ブラウザの幅を横切って変更されることはありませんと言うことです

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル> </ タイトル> 
    </ ヘッド> 
    < スタイル> 
        HTML、本体{ 
            最小幅：500pxなど。
        } 
        #container { 
            パディング左：200pxの。
            パディング右：150ピクセル; 
            高さ：200pxの。
        }
        #containerの.column { 
            フロート：左; 
        } 
        #center { 
            幅：100％ 。
            背景：赤; 
        } 
        #left { 
            幅：200pxの。
            余白左：-100％; 
            位置：相対; 
            背景：青; 
            左：-200px ; 
        } 
        #right{ 
            幅：150ピクセル。
            margin-left ：-150px ; 
            位置：相対; 
            右：-150px ; 
            背景：オレンジ; 
        } 
        #footer { 
            クリア：両方。
        } 
    </ スタイル> 
    < ボディ> 
        < DIV ID = "ヘッダ" > </ DIV > 
        < DIV ID = "コンテナ"> 
            < 本部ID =「センター」クラス=「列」>中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間中間</ DIV > 
            < DIV 上記ID = "左" クラス= "列" > zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco zoco左Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo Zuozuo </ divの> 
            < DIV ID = "右" クラス= "コラム" >右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</ DIV > 
        </ DIV > 
        <div のid = "フッター"> </ DIV > 
    </ ボディ> 
</ HTML >

このコードを実装することによって、テキストの唯一の真ん中が変更されます、狭いブラウザで見ることができ、両端がしません、これは聖杯のレイアウトで共通3列のレイアウトです。

杯レイアウト：私の理解すなわち、DIV端部が、カップの大きさを制限し、そして中間DIVがカップは還元水の特定の量、と見ることができるような、固定されている水の量、したがって、水のレベルが増加または減少続きます