floatに代わってページをレイアウトするのに「flexbox」を使うととても短いコードでできると知りました。スタイルシートは
.container{
display: flex;
}
.left{
width: 300px;
}
.contents{
flex: 1;
}

だけだそうです。ほんとにびっくりです。詳しくは
floatより辛くない「flexbox」でざっくりレイアウト

高さの違うアイテムを隙間なく並べてくれる
jQuery プラグイン Masonry
を使用時、2カラムにするとMasonryの部分がcontainerの幅になって右側にはみ出してしまいます。
そこで「jQuery プラグイン Masonry のイニシャライズ（初期設定）」において #containerを2カラムの右側のdivクラス名にしてisFitWidth: trueをisFitWidth:falseに変更すると右側の中に納まってくれました。。

更にPC表示サイズ960pxが切れるときブルタウンメニューに設定しました。
cssにおいて960px以下ではleftを　display: none;　としてブルタウンメニューのオープンボタンを出しました。
パソコンのかたはウインドウサイズを狭めてみてください。

詳しくはソースをご覧ください。