片方のカラムはフレキシブル もう一方のカラムは固定幅のコーディング

/ HTML5/CSS3/jQuery / Comment[1]

例えばメインカラムとサイドカラムの2カラムリキッド構成でサイドカラムには広告を載せているとします。
リキッドレイアウトはウインドウサイズに応じて割合で伸縮するため、様々な環境でほぼ同じような表示が期待できます。
しかし、広告などの固定幅のコンテンツを載せる場合、これ以上は広げたく(縮めたく)ないなという場合があるかと思います。

それを解決するHTML/CSSコーディングの一例をあげてみます。

HTML
<div id="wrapper">
  <div id="main">
    リキッド幅のメインコンテンツ
  </div>
  <div id="side">
    固定幅サイドコンテンツ
  </div>
</div>
CSS
div#wrapper {
  position:relative;
}

div#main {
  padding-right:330px;
}

div#side {
  width: 300px;
  position: absolute;
  right: 0;
  top: 0;
}
デモはこのサイト

通常はdiv#wrapperにclearfixをかけてメインカラムをdiv#main { width:70%; float:left; }として、サイドカラムをdiv#side { width:30%; float:right; }としたり、div#wrapperにdisplay:table;でdiv#mainとdiv#sideをdisplay:table-cell;などとする場合が一般的でしょう。
しかし、これらの方法では上記の片方リキッドで片方固定というレイアウトは実現できません。

そこで、paddingで幅を取っておいてpositionでそこに置くという手法を使います。

まず、親であるdiv#wrapperにposition:relativeをかけます。このdivが子から見て基準の位置となります。
次にリキッドになるdiv#mainにpadding-right:330pxをかけます。300pxがサイドのサイズで30pxはマージンの変わりです。
div#sideをposition:absoluteで右上に移動させて完成です。div#main全体のサイズは変わってもpx指定したpadding領域のサイズが変わることはありません。

関連記事

コメント

コメントテスト

| URL | test#-

:
:
:
:
:
管理人のみ表示を許可