燈明日記 このページをアンテナに追加 RSSフィード

ごあいさつ

燈明日記へようこそ!!

燈明日記の主なテーマは、以下の通りです。

そして、燈明日記へ来られたのも『私』と『あなた』の何かのご縁です。なので、どうぞごゆっくりご覧下さい!


2009/3/13(金)

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

解説第七弾です。

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


今回、解説しているCSSソースは、右サイドバーの段組レイアウトです。

実は、以下の3箇所の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ネガティブさせ、空いたところに左サイドバーを回り込ませます。


関連ページ:

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元