BaySky eBLOG

livedoor Blog でも３カラム化を採用するサイトが増えた。
しかし、３欄相互の表示が不安定なサイトを見かけます。
次の記事が改善の参考になると思います。

３カラム化は形式で２種類に分かれる。すなわち、

• case-1）　両サイドが固定幅で、真ん中の記事本文欄が可変幅：両サイドバーの表示が優先され、画面の有効幅に応じて真中欄の幅が伸び縮みする。
  
• case-2）　３欄共に固定幅：　画面左に｢お気に入り｣など表示して画面の有効幅が狭くなると右サイドバーの右端から表示が欠けて行く。

上図のBLOGの場合、CSSのキーポイントは次のとおりです。

case-1）　両サイドが固定幅で、真中が伸縮(可変)幅

　#links {
　　　　　　　　position: absolute;
　　　　　　　　top: ZZpx;
　　　　　　　　left: 0px;
　　　　　　　　width: XXpx;
　　　　　　　　........
　　　　　}
　.blog {
　　　　　　　　margin:ZZpx YYpx 0px XXpx;
　　　　　　　　width: auto;
　　　　　　　　........
　　　　　}
　#links2 {
　　　　　　　　position: absolute;
　　　　　　　　top: ZZpx;
　　　　　　　　right: 0px;
　　　　　　　　width: YYpx;
　　　　　　　　........
　　　　　}

case-2）　３欄共に固定幅

　#links {
　　　　　　　　position: absolute;
　　　　　　　　top: ZZpx;
　　　　　　　　left: 0px;
　　　　　　　　width: XXpx;
　　　　　　　　........
　　　　　}
　.blog {
　　　　　　　　position: absolute;
　　　　　　　　top: ZZpx;
　　　　　　　　left: XXpx;
　　　　　　　　width: WWpx;
　　　　　　　　........
　　　　　}
　#links2 {
　　　　　　　　position: absolute;
　　　　　　　　top: ZZpx;
　　　　　　　　left: (XX+WW)px;
　　　　　　　　width: YYpx;
　　　　　　　　........
　　　　　}

case-1 にするか、case-2 にするかは各人の好みです。
上の数値設定を基準にして、多少加減すれば良いと思います。