幅固定+リキッドレイアウトにする方法

Go Yoshiwara

Go Yoshiwara

左側に幅固定のメニューを置いて、右側のコンテンツをリキッドデザインにしたかったので、やり方を調べてみました。

初めてそういったレイアウトをしたのですが、まず単純に考えて

■左側の幅200px
■右側の幅100%

って感じに書けばいいと思ったのですが、これだとまったくうまくいかない。

つまり、右側の幅は「全体の幅(100%)-200px」にならないといけないんですが、こういった書き方がCSSでは出来ません。ではどうするか。

#left{
	float:left;
	width:200px;
}
#right{
	float:right;
	width:100%;
	margin-left:-200px;
}
#right #inner{
	margin-left:200px;
}

こんな面倒な書き方をしてあげるとうまくいきました。

右側のdivを入れ子にして、一回ネガティブマージンで-200pxしてあげて、さらにその中のdivでマージンを200pxとってあげると、意図したようなデザインになりました。IE6、IE7、FF、Operaでは動作確認しましたが、なんか気持ち悪い書き方だなぁ・・・。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1982年生まれ。信濃中学校卒業。フリーターとして23歳まで様々な職業に従事し数々のスキルを身につける。ウェブデザイナーとして活躍したのち、25歳で起業し代表取締役に就任(会長を経て2022年に退任)。自然あふれる場所で生まれ、アウトドアスポーツをして育ったが故にITの道を志したが、近年、再びアウトドアな環境、遊び、生き方を模索して長野県に移住。わくわくするものをつくり続けていたい。

このメンバーの記事をもっと読む