css calc

• CSSで計算式を可能にするcalc()ファンクション

通常、左コンテンツfloat left 可変+ 右メニュー float:right 幅固定 width:300px
といったことはできない。

なので、greenのようにjavascriptでwidthを動的に変更するか

css calcを使う

#contents {
  float  : left;
  width  : 59%;
  width  : -webkit-calc(100% - 400px);                                                                                  
  width  : calc(100% - 400px);     
}

IE8以前でもIE独自機能 css bahaviorを使えばできるけど、めんどうなのでやらない。

でも、このサイト、それができてるよね。nagative marginを使えばいけるっぽい

width:100%で右メニュー分 margin-right : -400px;で空白を開ける
contentsの要素全部でmargin-right : 400px;を指定して元に戻す

width:100%にしてマージンを付けるときは忘れずにbox-sizing : border-box;
しておきましょう。でないと要素が突き抜けます。
box-sizing : border-box;に変更すると中のコンテンツのマージン分必要なくなるので注意

#contents {
  float  : left;
  width  : 100%;
  margin-right  : -340px;
  box-sizing : border-box;                                                                                  
}

#contents article{
  margin-right  : 340px;                                                                                  
}