【Twenty Ten】サイドバーを2列にして３段組にする

配置ですが、今回はフロートを使い設定します。

TwentyTenテーマの初期設定でサイドバーにウィジェット１，２が利用できるようになっているので、それを利用してサイドバーを2列にします。

メインには、コンテンツとサイドーがありサイドバーを2列にするので、まずコンテンツの幅を初期状態より狭く固定にするのでstyle.cssで以下に変更します。
【変更前：style.css】

#content {
  margin: 0 280px 0 20px;
}

【変更後：style.css】

#content {
  width: 520px;
  margin: 0 0 0 10px;
}

次にサイドバーを2列にしますので、以下にあるwidth:220px;を190pxに変更し、clear:right;がある#secondaryごと削除します。
【変更前：style.css】

#primary,
#secondary {
  float: right;
  overflow: hidden;
  width: 220px;
}
#secondary {
  clear: right;
}

【変更後：style.css】

#primary,
#secondary  {
  float: right;
  overflow: hidden;
  width: 200px;
}

最後にcontainerのmarginを変更します。
【変更前：style.css】

#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

【変更後：style.css】

#container {
float: left;
margin: 0 -405px 0 0;
width: 100%;
}

【変更前の2段組サイト画像】

【変更後の3段組サイト画像】

上記の説明以外に、サイドバーを少し広くしたい場合、「#main .widget-area ul」のpaddingの値を変更すると幅を広げる事が出来ます。
【変更前：style.css】

#main .widget-area ul {
  margin-left: 0;
  padding: 0 20px 0 0;
}

【変更後：style.css】

#main .widget-area ul {
  margin-left: 0;
  padding: 0 10px 0 0;
}

＊もし、このサイトを参考に3段組を作る場合、#content、#primary、#secondary、#containerの幅（width）やマージン（margin）は自身のサイトに都合の良い大きさに合わせて設定してください。