喪志玩物-二欄等高版面－Blog on Something Else

因為看到一個不錯的blog: 網站製作學習誌，其中介紹一些CSS的觀念和技巧，才發現我有些CSS的觀念錯誤。於是這幾天又開始玩我的版型了，雖然這並不是之前玩不出想要板型的原因。

但辛苦還是有結果的，就是現在這個版型：置中不固定寛度的兩欄式板面，左欄(內文)會隨視窗大小改變寛度，右欄(選單)則是固定寛度，而且兩欄"看起來"是等長的，也就是無論哪一欄較長，另外一欄都會自動加上空白變成一樣的長度，而且完全是用CSS語法打造。這看似平凡無奇，但光用CSS要做到兩欄顏色不同還能自動對齊長度，還真是會讓人無從下手。

做法是從The CSS Playground的三欄等高版面範例修改而來的，很有趣。但這範例的一個關鍵在於html檔中要把邊欄區塊寫在內文區塊的前面，就一般而言內文放在邊欄之前其實是為了網頁的親和力，如純文字瀏灠器之類的，而調換兩個區塊的順序就會破壞了這樣的設計。親和力的考量就現實而言我不知重不重要，我也從沒測試過，但不知為何，就是不太想修改模版把邊欄調到內文的前面。這莫名的堅持讓我頭痛了好幾天，研究如何不更改html的順序也能達到同樣的效果。

幸好最後還是研究出一個可行的做法。原始檔我會附在最後，在此就不解釋其中原理了，因為用文字很難描述，有興趣就自已看吧。歡迎大家提出意見或更好的做法。

最後幾點心得:

1.用類似的邏輯要做成三欄式版面，我試了一下，發現應該是做不到的，除非要在html檔中把邊欄寫在內文前面。

2.這方法大概只適用在單色底色的版面上。

3.雖然不修改html檔的內容順序，但還是要增加兩層div區塊。如果是使用無法修改模版的BSP，這方法大概也不能用。

4.其實要不是一些奇怪的堅持，也不用這麼辛苦地改出這麼奇怪的CSS檔。純粹是好玩，也真是虐待自己啊。

原始檔:

請自行把CSS中同色系的顏色改為相同的顏色，即可看出效果。設成不同顏色只是為了區分出不同區塊。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="screen">@import "2-column.css";</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>Title</h1>
</div>
<div id="Subcontainer">
<div id="RangeAB">
<div id="Column_A">
<div id="InnerA">
<div id="Content">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</div>
</div>
<div id="Column_B">
<div id="Menu">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</div>
</div>
<div class="clearer"> </div>
</div>
<div id="Footer">
<h1>Footer<h1>
</div>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
color:#fff;
background-color: #000;
}
.clearer {
clear : both;
height : 1px;
font-size : 1px;
}
#Container {
margin:auto;
padding: 0;
width: 80%;
min-width: 800px;
background-color: #f00;
}

#Subcontainer {
padding: 0;
margin: 0;
background-color:#fff;
border-right: 220px solid #090;
}

#RangeAB {
margin-right: -220px;
}

#Column_A{
float: left;
width: 100%;
}

#InnerA{
border-right: 220px solid #070;
}

#Content {
background-color:#999;
}

#Column_B{
float: left;
width: 220px;
margin-left: -220px;
}

#Menu {
background-color:#050;
}