web019 リキッドデザイン(2カラム)で１カラムのみ横幅を固定（width:calc(XX% - YYpx)）

リキッドデザイン(2カラム)で１カラムのみ横幅を固定（width:calc(XX% - YYpx)）

width:calc(XX% - YYpx);

■利用シーン
リキッドデザインでサイドバーに広告を載せており幅を固定し、コンテンツだけリキッドとする場合。
※caniuseでほぼ全てのブラウザで利用可能

■コード

/* 左側のカラム 。幅：可変。*/
.wrap{
  overflow:hidden;
}
.content {
  float: left;
  width: calc(100% - 300px);
}

/* 右側のカラム。幅：固定 */
.sidebar{
  float:right;
  width:300px;
}

■参考
calc - CSS | MDN