CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固

[ellora]

flexbox便利なのに一部ブラウザのせいで使えない…

[v_naokiss_v]

[css] [table] [layout]

[sutara_lumpur]

#CSS IE8対応となると、1のネガティブマージン(box-sizing使用)か、3のdisplay:tableということになるのか。左固定、右可変ならもっと簡単だけど。

[yukimurasama]

スマホからじゃ見にくいことこの上ないんだけど、どーするの？

[toripika]

めも

[inulab]

関係ないけどtableタグのfixed指定ってまだ描画重いんだろか