iso tank

3段組 リキッドレイアウト

ホームページのリキッドオオォーーーなレイアウトです。リキッドなレイアウトっていうのは流動的なレイアウトのことです。 流動的なレイアウトってのはつまりこのホームページ。ブラウザを最大化してもサイドバーはウィンドウの右側に張り付いたまま。 そしてこの文字が書かれているエリアが横に広がります。つまりブラウザウィンドウの幅に合わせてホームページの幅も広がります。

で、3段組と一言に言っても色々あるわけでして、
左右がサブコンテンツのパターン
この図のように、メインが中央で両脇にサブがつく場合は、大抵中央のメインコンテンツのみが伸縮する。

おいらが今回いじったのは、
左2段ががメインコンテンツのパターン
こういうやつ。

サンプルのページ

おいらの期待通りであれば、メインコンテンツが二つとも伸縮するはず。


#MainContents {
    width:100%;
    float:left;
    margin-right:-210px;
}
#BOX1 {
    margin-right:210px;
}
#BOX2 {
    width:100%;
}
#Lcolumn {
    width:50%;
    float:left;
}
#Rcolumn {
    width:50%;
    float:left;
}
#SideArea {
    width:210px;
    float:left;
}

とりあえずこんなCSSにしたらこうなった。
3columnliquid1.png

もっとも、実際このレイアウトを使うかと言ったらたぶん使わないような気がするけど。

3段組 リキッドレイアウト への Writeback

名前:

URLまたはE-Mail:(※リンク表示注意)

コメント:

情報をクッキーに保存する

trackback URI:

http://iso.tank.jp/puroguramu/3columnliquid_1.tarako