被母DIV無視的Float DIV子

其實這個問題遇到過好幾次了，這次又遇到就特別給他研究一番，「當一個母div裡面包著的子div是float的話，母div的空間不會包含子div」，聽起來很饒舌，看一下下面的說明就知道。

我想要作成下面這個樣子，在不固定外面那個紅框 div（content-wrapper）的高度下，我希望他的高度會依照裡面那兩個子div變動，圖A

HTML：

<div id="content-wrapper">
  <div id="main">Main Content </div>
  <div id="menu">
   menu
  </div>
</div>

CSS：

#content-wrapper {
 border: 1px solid #FF0000; /*加邊框只是方便觀察*/
}
#main {
 float: right;
 width: 68%;
}
#menu {
 float: left;
 width: 30%;
}

可是實際呈現出來不會是這樣，會變成

圖B.

在dreamewaver下看起來也是這樣，如果把#content-wrapper 加入position: relative;的屬性，在dreamweaver所見即所得的畫面看起來就會變正常(圖A)，但是在IE或是FireFox看起來還是像圖B一樣。

其實我沒有仔細去查這個是一個bug還是原本的標準就是這樣設定，下面是一些我實驗過的方法來讓他變成我想要的樣子，我只有實驗FireFox跟IE，因為平常我也只有在用這兩個，其他的我就不知道啦。

方法1. (IE only)

對IE而言真的很奇怪，只要有指定外面那個content-wrapper 的寬或是高，他就會變成圖A那樣，沒什麼道理，這給我一種很bug的感覺(這是什麼感覺啊 = =)。

例如

    #content-wrapper {
     border: 1px solid #FF0000; /*加邊框只是方便觀察*/
     width: 100%;
    }
  

真的很奇怪吧，但是這對FireFox無用，看起來還是一樣。

方法2. (FireFox & IE[註])

這個方法感覺起來就比較有道理(ˋˊ還不是亂試出來的)，重點就是使用CSS的display，把外面那個#content-wrapper 的display設定成table，裡面有子div的display也設定成table，這樣就可以變成圖A了，這個設定就是讓div以表格的格式呈現，[註]其實IE並不支援display:table，連IE7好像也沒...，但是因為要修正table特性會改變div的寬度加了width: 100%;才讓IE也會通！！。直接看下面的CSS

#content-wrapper {
 border: 1px solid #FF0000; /*加邊框只是方便觀察*/
 display: table;
 /*div套用display:table屬性會有一個預設的margin 所以要照自己想要樣子修正*/
 margin:0; 
/*div套用display:table屬性會像表格那個 沒設定大小就是裡面內容的大小 
故以此修正 也因為這個修正讓IE也通用*/ 
 width: 100%; 

}
#main {
 float: right;
 display: table;
 margin:0;
 width: 68%;
}
#menu {
 float: left;
 display: table;
 margin:0;
 width: 30%;
}

方法3. (FireFox & IE)

雖然母DIV(content-wrapper) 看不到他裡面float的DIV，但是他還看得到沒有float的DIV，我們可以利用這個特性來製作一個支架，把母DIV給撐開來，不過這個方法需要更動到HTML，好處是不用去變更原本DIV的CSS。 (<div class="clear"> </div>也可以寫成<div style="clear: both;"> </div>就不用寫CSS，但我喜歡分開)

HTML：

<div id="content-wrapper">
  <div id="main">Main Content </div>
  <div id="menu">
   menu
  </div>
  <div class="clear"> </div>
</div>

CSS：

#content-wrapper {
 border: 1px solid #FF0000; /*加邊框只是方便觀察*/
}
#main {
 float: right;
 width: 68%;
}
#menu {
 float: left;
 width: 30%;
}
.clear {
 clear: both; 
}