【轉載自我愛水煮魚】
這篇將涉及如何設置每個 DIV 的寬度和布局排版。同樣也會向你展示如何讓你的主題顯示正確，并同時在 Firefox 和 IE 顯示相同。
在我們開始之前，打開下面這些東東：Xampp Control，主題文件夾，Firefox 瀏覽器，IE 瀏覽器，index.php和style.css這兩個文件。
第1步：
第一件你要去做的事情就是你要決定你主題的總體寬度。我們使用 750px（750 像素）；每個 100 像素是1英寸。你的主題取決于你絕大多數博客訪問者的查看規格。你需要避免的是使用 900px 的主題，如果你的讀者都大多數使用 800px × 600px 的屏幕，這樣的話，你的 900px 主題將會有 100px 超出他們的屏幕。那是無法接受的。
不管怎樣，你怎么樣把你總體寬度設置為 750px 呢？
你需要把所有的東東放入一個 750px 盒子中或者 DIV 標簽。所有東西是指包括：header，container，sidebar 和 footer。
在 <body> 之后增加：<div id=”wrapper”>
在 </body> 之前增加：</div>
在 style.css 文件中輸入以下代碼：
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
在 CSS，具體是在 style.css 中， # 號是你用來指向跟着 id 的 DIV。而點號是用來指向跟着 class的 DIV。舉個 class 的例子，如果你的代碼是 <div class=”wrapper”>，那么就用 .wrapper 來替代 #wrapper 去指向 wrapper DIV 標簽。
同時保存 index.php 和 style.css 文件。刷新 Firefox 和 IE 瀏覽器（按 F5）查看所做的改動。
進一步解釋：
- margin: 0 auto 0 auto; 意思是（准確次序）：0上頁邊空白，右自動頁面空白，0下頁邊空白和左自動頁面空白。從現在開始，記得設置左右頁邊空白為自動將使得居中對齊。
- width: 750px; 顯而易見是 750 像素。
- text-align: left; 是讓 wrapper DIV 中的文本向左對齊因為你會改變 body{ text-align: left;} 到 text-align: center;
第2步：
把 body{} 中的 text-align: left; 改成 text-align: center;。
為什么？（我假設你使用的是 Firefox 和 Internet Explorer 6）。你的布局可能你看起來是正確的，但對于使用早前版本的 IE 用戶可能不正確。還記得設置左邊和右邊的頁邊空白為自動是居中嗎？但是這并不是對所有的 IE 都適用，所以 body{ text-align: center; } 是讓 wrapper DIV 居中在舊版本 IE 的一種解決方案。
（隨便說一下，在 Firefox 和 IE 中文本大小是不同的，我們稍后解決。）
第3步：
讓 Header 浮到左邊并且設置它的寬度為 750px：
#header{
float: left;
width: 750px;
}
第4步：
讓 Container 浮到左邊并且寬度為 500px：
#container{
float: left;
width: 500px;
}
第5步：
讓 Sidebar 浮到左邊，寬度為240px，并且給它灰色的背景：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
注意，你沒有使用 # 號去指出 Sidebar DIV，而是使用點號。#ffffff 是白色而background: #eeeeee; 是非常淺的灰色。你給側邊欄增加一個背景顏色只是去查看當增加剩下的 10 像素之后的不同之處。
第6步：
讓 Footer 浮到左邊，左右兩邊都沒有東西，并且寬度為：750px：
#footer{
clear: both;
float: left;
width: 750px;
}
Header 和 Footer 的樣式有什么區別呢？答案是 footer{} 中有 clear: both;。它在那兒使得 Footer 不能和它上面的東西（如 Sidebar 或者 Container）連接起來。
保存并刷新瀏覽器。
第7步：
給側邊欄增加其余的 10 像素的頁邊空白。現在你的側邊欄應該是下面這個樣子：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
保存并刷新瀏覽器去查看 10 像素的空白增加到側邊欄的左邊了。
margin: 0 0 0 10px; 具體的意思是：上邊空白為0，右邊空白為0，底部空白為0，左邊空白為10像素。當大小為0的時候，px 單位不是必需的。
第8步（額外的步驟）：
這是為了一旦你使用了20像素的頁邊距而不是10像素。20像素的頁邊距可能會破壞你的布局并把側邊欄擠到頁面的底部，因為一個20像素的頁邊距使得 Container 和 Sidebar 的寬度之和為 760px 而不是 750px。這額外的步驟是 Internet Explorer 的錯，這個使得雙倍頁邊距的 bug 在 Firefox 中并不存在。
為了解決這個問題，增加 display: inline; 到側邊欄。現在你的側邊欄應該是：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
這篇到此為止，如果你有什么問題就請大膽問吧，我會進自己最大努力幫你的，不要讓你僅僅成為只是來這里逛逛的常客。
下一篇：WP Theme 教程 #12：日志樣式化和其他雜項
請查看教程目錄：WordPress 主題教程系列
翻譯自：WP Theme Lesson #11: Widths and Floats
創建 WordPress 主題系列教程均為本站翻譯，如要轉載，請注明：轉載自我愛水煮魚和本文地址。
