【Twenty Ten】3段組、真ん中コンテンツのCSSレイアウト方法

左にコンテンツ、右にサイドバーが二つのレイアウトから、中心にコンテンツ、両サイドにそれぞれサイドバーを配置するCSS例。

【左コンテンツ、右サイドバー2列のCSS】

#container {
  float: left;
  margin: 0 -405px 0 0;
  width: 100%;
}
#content {
  width: 520px;
  margin: 0 0 0 10px;
}
#primary,
#secondary  {
  float: right;
  overflow: hidden;
  width: 200px;
}

【中心コンテンツ、両サイドにサイドバーのCSS】

#container {
  margin-top: 0;
  margin-right: -930px;
  width: 100%;
  float: left;
}
#content {
  float: right;
  width: 100%;
}
#primary {
  width: 200px;
  overflow: hidden;
  float: right;
}
#secondary  {
  width: 200px;
  overflow: hidden;
  float: left;
}
#content>* {
 margin-right:220px;
 margin-left:220px;
}

*ただし、アーカイブ月別などの位置や、パンくずリストがないとコンテンツがメニューにくっついてしまうので、別途修正が必要です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です