ネガティブマージン 右側を固定幅にしたリキッドレイアウト - bnote

floatを使った2段組で、右側が横幅固定で、左側が画面横幅の残りを可変でということをしたいとき、 どうしたら実現できるのでしょう。 例えば、左側を可変で右側を200pxとした場合、左側の width に100% - 200px と指定できれば問題ないのですが このような指定はできそうにありません。 これを解決する方法が ネガティブマージン になります。 [参考:Creating Liquid Layouts with Negative Margins] 可変にしたいほうの段のwidthを100%とし、marginをマイナスのピクセルを指定することによって リキッドレイアウト を実現することができます。 例えば、上記例のような場合、左側の段に width を 100% とし、margin-right を -200px と float:left を指定します。 左側の段の width は 1

[toshi3221]

右側固定のリキッドレイアウト

[caligo]

リキッドレイアウト]

[kaeru333]

リキッドレイアウトのネガティブマージンをつかっている。CSSも綺麗な感じがする。

[i-Daisuke]

2カラム時に片方を固定にし、残った面積で可変にするネガティブマージン