利用DIV CSS排版

過去我都愛用TABLE標籤來對網頁作排版的動作，有一段時間覺得也挺好上手的很直覺也很快速，但有時候後來對於比較複雜的版面網頁就會出現很複雜的TR、TD標籤，且要相當依賴IDE工具不然會看不懂自己排什麼版面，效率方面經過搜尋發現效果也比較差，因為要解譯到最後一個才會顯示整個網頁。後來發現CSS也是一種不錯的排版方式，優點是彈性，結構清楚，缺點對我來說就是需要一段適應時間，雖然也知道CSS屬性就那些可是有時候就會忘記怎麼寫了。下面是我自己測試的結果。

假設下圖就是我要排兩個區塊的樣子...html標籤與css安排如下:
<div id="main" >
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>

#main{width:100%; display:inline-block;}
#sub1{width:50%; float:left;}
#sub2{width:30%; float:left;}
如果sub1、sub2寬度都小於外面的div，且float都設定從左至又安排，就會如上圖所示。

#main{width:100%; }
#sub1{width:50%; float:left;}
#sub2{width:30%; float:left;}

如果缺display:inline-block 就會變成上圖。


#main{width:100%; display:inline-block;}
#sub1{width:50%; float:left;}
#sub2{width:70%; float:left;}

被包含的元素寬度也很重要如上圖所示.

以上是自己測試得到的心得...