一、兩列自適應寬度
下面以常見的左列固定右列自適應為例，因為div為塊狀元素，默認情況下占據一行的空間，要想讓下面的div跑到右側，就需要做助css的浮動來實現。首先創建html代碼如下：
<div id="side">此處顯示 id "side" 的內容</div> <div id="main">此處顯示 id "main" 的內容</div>
div創建完成后，開始創建css樣式表，代碼如下：
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
然后創建#main樣式，注意這里設置#main的左邊距為120px。預覽結果如下：
二、兩列固定寬度
有了前面的基礎，兩列固定寬度就容易多了，只需要把#main的寬度由百分比改為固定值。
三、兩列固定寬度居中
兩列固定寬度居中，需要在兩列固定寬度的基礎上改進，在學一列固定寬度居中時，我們知道讓它居中的方法，所以這里需要在這兩個div之外再加一個父div：
<div id="content"> <div id="side">此處顯示 id "side" 的內容</div> <div id="main">此處顯示 id "main" 的內容</div> </div>
css代碼如下：
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
四、xhtml的塊級元素(div)和內聯元素(span)
塊級元素：就是一個方塊，像段落一樣，默認占據一行出現；
內聯元素：又叫行內元素，顧名思義，只能放在行內，就像一個單詞，不會造成前后換行，起輔助作用。
一般的塊級元素諸如段落<p>、標題<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ........ 塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。
塊級元素默認占據一行，相當於在它之前和之后各插入了一個換行；而內聯元素span沒對顯示效果造成任何影響，事實也是如此；em只是讓字體變成了斜體，也沒有單獨占據一行。這就是塊級元素和內聯元素，正因為有了這些元素，才使我們的網頁變得豐富多彩。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以后，我們可以改變這種html的默認布局模式，把塊元素擺放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是說，可以用css的display:inline將塊級元素改變為內聯元素，也可以用display:block將內聯元素改變為塊元素。
五、三列自適應寬度
三列自適應寬度，一般常用的結構是左列和右列固定，中間列根據瀏覽器寬度自適應。下面在二列自適應寬度基礎上修改一下
<div id="side">此處顯示 id "side" 的內容</div> <div id="side1">此處顯示 id "side1" 的內容</div> <div id="main">此處顯示 id "main" 的內容</div>
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
把原來#main樣式的width:70%去掉，然后設置左右外邊距各120px，讓出左右列的寬度
#main { background: #99FFFF; height: 300px; margin:0 120px; }
六、三列固定寬度
三列固定寬度可以在三列自適應基礎上添加一個父div，並設置這個div的寬度即可，如下，添加一個id為content的父容器。
在源代碼里選中這三個div，然后點擊工具欄上的“插入div標簽”按鈕，這時彈出的窗口插入項會默認為：在選定的內容旁換行，輸入id為content，然后給這個div定義個寬度
三列固定寬度出來了，要想實現三列固定寬度居中就更方便了，只需設置#content {margin:0 auto;}即可
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin:0;} #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } #main { background: #99FFFF; height: 300px; margin:0 120px; } </style> </head></p> <p><body> <div id="content"> <div id="side">此處顯示 id "side" 的內容</div> <div id="side1">此處顯示 id "side1" 的內容</div> <div id="main">此處顯示 id "main" 的內容</div> </div> </body> </html>