サイドバーのサンプル

(1) サイドバー部、メインコンテンツ部ともに横幅を%で指定

ヘッダ部

max-width: 960px;

メインコンテンツ部

width: 80%;

float: right;

  • あああああああああああああああああああああああああああああああああああああああああああああ
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • ううううううううううううううううううううううううううううううううううううううううううううう
  • えええええええええええええええええええええええええええええええええええええええええええええ
  • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

サイドバー部

width: 20%;

float: left;

  • ああああああああああ
  • いいいいいいいいいい
  • うううううううううう
  • ええええええええええ
  • おおおおおおおおおお

フッタ部

max-width: 960px;

(2) サイドバー部の横幅は固定値、メインコンテンツ部は計算で指定

ヘッダ部

max-width: 960px;

メインコンテンツ部

width: calc(100% - 182px);

float: right;

  • あああああああああああああああああああああああああああああああああああああああああああああ
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • ううううううううううううううううううううううううううううううううううううううううううううう
  • えええええええええええええええええええええええええええええええええええええええええええええ
  • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

サイドバー部

width: 182px;

float: left;

  • ああああああああああ
  • いいいいいいいいいい
  • うううううううううう
  • ええええええええええ
  • おおおおおおおおおお

フッタ部

max-width: 960px;

(3) ウィンドウの横幅が760px未満の時は、横並び（float）を解除

ヘッダ部

max-width: 960px;

メインコンテンツ部

width: calc(100% - 182px);
（幅狭時は100%）

float: right;
（幅狭時は解除）

  • あああああああああああああああああああああああああああああああああああああああああああああ
  • いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
  • ううううううううううううううううううううううううううううううううううううううううううううう
  • えええええええええええええええええええええええええええええええええええええええええええええ
  • おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

サイドバー部

width: 182px;
（幅狭時は100%）

float: left;
（幅狭時は解除）

  • ああああああああああ
  • いいいいいいいいいい
  • うううううううううう
  • ええええええええええ
  • おおおおおおおおおお

フッタ部

max-width: 960px;