反過(guò)來(lái)也可以：左側(cè)寬度固定，右側(cè)自適應(yīng)。不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。

這種布局比較常見(jiàn)，博客園很多默認(rèn)主題就是這種。一般情況下，這種布局中寬度固定的區(qū)域是側(cè)邊欄，而自適應(yīng)的區(qū)域是主體內(nèi)容區(qū)——相信把側(cè)邊欄搞成自適應(yīng)的人很少吧？

要實(shí)現(xiàn)這種布局，也算比較簡(jiǎn)單。我們先給出html結(jié)構(gòu)：

<div id="wrap">
<div id="sidebar" style="height:240px;">固定寬度區(qū)</div>
<div id="content" style="height:340px;">自適應(yīng)區(qū)</div>
</div>
<div id="footer">后面的一個(gè)DIV，以確保前面的定位不會(huì)導(dǎo)致后面的變形</div>

代碼中的#wrap的div，是用來(lái)包裹我們要定位的這兩個(gè)區(qū)的；他后面還有個(gè)#footer，用來(lái)測(cè)試在前面的定位搞定后會(huì)不會(huì)導(dǎo)致后面的div錯(cuò)位——如果錯(cuò)位了，那證明我們的定位方法必須改進(jìn)。

下面列舉幾個(gè)常見(jiàn)的方法：

1，固定寬度區(qū)浮動(dòng)，自適應(yīng)區(qū)不設(shè)寬度而設(shè)置 margin

我們拿右邊定寬左邊自適應(yīng)來(lái)做示范,CSS代碼如下：

#wrap {
overflow: hidden; *zoom: 1;
}
#content ,#sidebar {
background-color: #eee;
}
#sidebar {
float: right; width: 300px;
}
#content {
margin-right: 310px;
}
#footer {background-color: #f00;color:#fff; margin-top: 1em}

其中，sidebar讓他浮動(dòng)，并設(shè)置了一個(gè)寬度；而content沒(méi)有設(shè)置寬度。

大家要注意html中必須使用div標(biāo)簽，不要妄圖使用什么p標(biāo)簽來(lái)達(dá)到目的。因?yàn)閐iv有個(gè)默認(rèn)屬性，即如果不設(shè)置寬度，那他會(huì)自動(dòng)填滿(mǎn)他的父標(biāo)簽的寬度。這里的content就是例子。

當(dāng)然我們不能讓他填滿(mǎn)了，填滿(mǎn)了他就不能和sidebar保持同一行了。我們給他設(shè)置一個(gè)margin。由于sidebar在右邊，所以我們?cè)O(shè)置content的margin-right值，值比sidebar的寬度大一點(diǎn)點(diǎn)——以便區(qū)分他們的范圍。例子中是310.

假設(shè)content的默認(rèn)寬度是100%，那么他設(shè)置了margin后，他的寬度就變成了100%-310，此時(shí)content發(fā)現(xiàn)自己的寬度可以與sidebar擠在同一行了，于是他就上來(lái)了。

而寬度100%是相對(duì)于他的父標(biāo)簽來(lái)的，如果我們改變了他父標(biāo)簽的寬度，那content的寬度也就會(huì)變——比如我們把瀏覽器窗口縮小，那wrap的寬度就會(huì)變小，而content的寬度也就變小——但，他的實(shí)際寬度100%-310始終是不會(huì)變的。

這個(gè)方法看起來(lái)很完美，只要我們記得清除浮動(dòng)(這里我用了最簡(jiǎn)單的方法)，那footer也不會(huì)錯(cuò)位。而且無(wú)論content和sidebar誰(shuí)更長(zhǎng)，都不會(huì)對(duì)布局造成影響.