Yuichirouの文書の倉庫

記事一覧ページ

 | 

2004年10月11日

本家で使用しているfloatによる左右サイドバー設定(最新版) 15:16

本家:d:id:Yuichirou:20050206#1107675527

ページのヘッダ

<div class="left"><!-- div.leftの開始タグ -->
<div class="main">

ページのフッタ

</div>
<div class="l-sidebar">
(左サイドバー部分)
</div>
</div><!-- div.leftの終了タグ -->
<div class="r-sidebar">
(右サイドバー部分)
</div>

スタイルシート

/* 幅の希望割合…左右マージン:各2%・左右サイドバー:各16% */
div.l-sidebar,div.r-sidebar,div.main,div.left {
	border-left-width: 0; border-right-width: 0;
	padding-left: 0; padding-right: 0;
}
div.main {
	position: static;
	float: right; width: 80%;
	/* 100%-20%=80% */
	margin-left: 0;
}
div.l-sidebar {
	position: static;
	width: 20%; /*\*/_width: 100%;/**/
	/* 16%×80%÷100=20% */
}
div.left {
	position: static;
	float: left; width: 80%;
	/* 100%-(16%+2%+2%)=80% */
	margin-left: 2%; _margin-left: 1%;
}
div.r-sidebar {
	position: static;
	float: right; width: 16%;
	/*\*/_float: none; _width: 100%;/**/
	/*\*/ margin-right: 2%; /**/
}
div.footer { clear: both }

%で指定する場合の数値計算

  • div.leftのmargin-left … 左マージンの希望割合(単位%・以下同様)
  • div.leftの_margin-left … (div.leftのmargin-left)÷2
  • div.r-sidebarのmargin-right … 右マージンの希望割合
  • div.r-sidebarのwidth … 右サイドバーの希望割合
  • div.leftのwidth … 100-{(div.r-sidebarのwidth)+(div.leftのmargin-left)+(div.r-sidebarのmargin-right)}
  • div.l-sidebarのwidth … (div.leftのwidth)×(左サイドバーの希望割合)÷100
  • div.mainのwidth … 100-(div.l-sidebarのwidth)
  • その他はすでに書いてある数値のまま変更しない。
トラックバック - http://yuichirou.g.hatena.ne.jp/Yuichirou/20041011
 |