CSS negative margin magic

過去在閱讀 CSS 檔案時 遇到 margin 為負值的情況
不求甚解 一直沒弄清箇中奧妙 ...
最近想自己湊個版型(theme template)
發覺負的margin 扮演關鍵角色!

尤其在 table-less CSS 的限制下
想把區塊擺置到適當的位置
似乎非 '負的margin' (negative margin) 不可

主要參考 css negative margins algebra
寫了以下簡化的 3-column layout css
不過我是先擺 left div , 而非先放 center div

"left_col"

Content for id "center_col" deliberately longer text

"right_col"

#container {
    width: 480px;
    background: #00cc00;
    margin: 0 auto;
    padding: 0px;
    overflow: hidden;
    border: 2px solid #00ff00;
    position: relative;

}

#left_col {
    width: 30%;
    background: #cc0000;
    margin-left: 0px;
   border: 2px solid #f00;
   float: left;  
}

#center_col {
    width: 35%;
    background: #00c100;
    margin-right:-66%;
       margin-left: 1%;    
   border: 2px solid #0f0;
   float: left;

}

#right_col {
    width: 30%;
    background: #0000cc;  
    padding-left: 10px;
   border: 2px solid #00f;
float:right;
}
//======



//=== 參考文章中 共同提到的關鍵詞
position: relative; ( for IE )
faux column (for unequal column heights)
...


[ref]
http://www.severnsolutions.co.uk/twblog/archive/2004/07/01/cssnegativemarginsalgebra
(用數學式子表達 個人覺得比較清楚)


http://www.alistapart.com/articles/negativemargins
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

http://www.communitymx.com/content/article.cfm?cid=b0029