小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

右サイドバーを左サイドバーへ

CSSレイアウト

解説第七弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。


今回、解説しているCSSソースは、右サイドバーの段組レイアウトです。
実は、以下の３箇所のrightとleftを逆すれば、左サイドバーの段組レイアウトになります。

#contents_container {
    background-color:#ccccff;
    width:100%;
    clear:left;

    margin-right:-200px;  /* 右サイドバー */ 
/*    margin-left:-200px;    左サイドバー */

    float:left;           /* 右サイドバー */  
/*    float:right;           左サイドバー */

}
#for_ie_wrapper {
    margin-right:200px;   /* 右サイドバー */ 
/*    margin-left:200px;     左サイドバー*/
}

右サイドバーは、メインコンテナーを幅100%（親要素に対して100%)で左フロートさせ、右マージンを200pxネガティブさせ、空いたところに右サイドバーを回り込ませます。


左サイドバーは、これを逆にするだけです。
つまり、メインコンテナーを幅100%（親要素に対して100%)で右フロートさせ、左マージンを200pxネガティブさせ、空いたところに左サイドバーを回り込ませます。

関連ページ：